前言
公司一个客户要求我们参照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')