移动端video转canvas总结

本文总结了一个移动端H5项目中将video转换为canvas渲染的过程,包括遇到的问题及解决方案。在项目中,由于视频编码问题导致在iPhone6P上播放异常,通过转换为移动设备兼容的视频格式解决。此外,还解决了canvas视频清晰度、播放卡顿以及iPhone调用相机后页面刷新的问题。项目最后使用了微信上传照片的SDK,并提供了裁剪库链接和实际效果的展示链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

公司一个客户要求我们参照http://game.flyh5.cn/resources/game/lq_game/2018_9_xmt_c/main.html?v=1557026481 做一个病毒式H5供宣传,打开一看就是那些场景应用的H5,主要流程就是一开始有几张照片,点不同照片播放不同视频,播放完视频上传图片生成海报。

我看了看他们的源码是使用白鹭egret+eui做的,动画效果还是不错的,本人才学疏浅(才疏学浅),做不到太炫酷的动画,加上项目比较赶,只给到两天时间,经过协商最终把一些复杂动画去掉了,主流程还是一样。

此项目纯前端,没用到后台接口

分析

项目要求点不同角色播放不同视频,我看了看他们的效果是没有那个视频工具栏,看了他们源码是把video转成canvas渲染上去,众所周知canvas是可以把画图像,canvas画视频应该就是把视频一帧一帧的画出来播放。

问题总结

先上最终部分代码

html

<!-- 画视频的div标签 x5-video-player-fullscreen="true"-->
    <div id="drawDiv" class="div-draw">
      <video id="video" class="video-main" src-path="" playsinline="" webkit-playsinline="" x5-playsinline=""
        x5-video-player-type="h5" x5-video-orientation="portrait"
        style="z-index: 0; display: none;"></video>
      <!-- 画视频的canvas标签 -->
      <canvas id="drawCanvas" class="canvas-draw" width="1600" height="1600"></canvas>
    </div>

js(CSS的操作可以省略)

//视频转canvas
var canvasDrawVideo = {
  onLoad: function (canvas, url) {
    this.canvas = document.getElementById(canvas)
    this.video = document.getElementById('video')
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值