移动端video转canvas总结

最新推荐文章于 2024-01-17 11:32:43 发布

CrazBarry

最新推荐文章于 2024-01-17 11:32:43 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/CrazBarry/article/details/90053128

本文总结了一个移动端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')