h5中利用canvas绘制video 忽略浏览器自带视频播放控件

背景

项目是做短视频的所以有个视频分享功能，视频分享出来以后的要求是H5要以##video为背景（还要可以控制暂停播放），视频上要放一下悬浮层，用以展示视频的##基本信息和下载引导按钮

遇到的问题

1 要考虑ios和Android系统自带的视频播放控件，还要考虑微信的内置X5浏览器
ios上视频控件还可以去除然后自己定义播放暂停没问题，
但是Android视频播放控件下面一排的控件可以去除，但是视频中间的暂停播放按钮去除不了
2手机浏览器自带的视频插件会在视频播放的时候 video层级最高，之前Video上的浮层就看不到了，无论定位后z-index设置多大都没用
3视频在播放的时候不同的手机会出现全屏的情况，这与之前的作为背景的初衷就不同了

基于以上原因，导致在不同设备上使用video标签会不尽人意，同时对于ios与Android对视频的渲染也有所差别，代码实现起来有点繁琐

经过多方百度终于找到了符合要求的方法将video渲染在canvas画布上：

效果如下：

效果图.png

html

<video  style="position: relative;  object-fit: fill;"   loop id="video1" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"  src="video.mp4"></video>
<canvas id="myCanvas" width="400" height="400"></canvas>
//预览图
<img src='./images/videoPreview.jpg' id='poster' style='display: none;' >
 //播放暂停按钮
<div class='palyChange'></div>

css

canvas{width: 100%;height: 100%;} /*这里是将下面canvas绘制放大后的视频缩小为设备的大小*/
video{display: none}//隐藏video

js

var timer=null;
              var video=document.getElementById('video1');
              var poster=document.getElementById('poster'); //用于视频初始化poster图片
              var canvas = document.getElementById("myCanvas");
              var context = canvas.getContext("2d");
              canvas.width = window.innerWidth*2;  //获取屏幕宽度作为canvas的宽度  这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）
              canvas.height = window.innerHeight*2; 
              context.drawImage(poster, 0, 0, canvas.width, canvas.height);//canvas上绘制postere图片 也可以点击播放后隐藏图片无需绘制
              function draw1() {//绘制视频
                 video.play();
                  timer = setInterval(function(){
                    context.drawImage(video, 0, 0, canvas.width, canvas.height);//绘制视频
                 },40);
              };
              var isplay=false;//视频播放状态
              $('#myCanvas').on('touchstart',function(e){
                  var e=e || event;
                  e.preventDefault();
                  if(!isplay){
                      isplay=true;
                      video.pause();
                      $('.palyChange').show();
                      clearInterval(timer)
                  }else{
                      video.play();
                      $('.palyChange').hide();
                      isplay=false;
                      draw1() 
                  }
                  
              })
              $('.palyChange').click(function(){ //初始化暂停状态下 点击播放（开始绘制视频） 
                      video.play();
                      $('.palyChange').hide();
                      isplay=false;
                      draw1();
              });

上面canvas绘制视频的时候放大倍数不宜过大我这里是放大倍数过大以后在微信置X5浏览器上显示有问题（会出不来）
上面利用的定时器循环绘制视频：由于一般的MP4视频一秒钟多为24帧 30帧
所以为保证贴近真实的video视频播放这里的setInterval 给的时间不宜太小（会卡顿）太大（会有快进跳跃的感觉）由于使用到了定时器所以在视频暂停后清除定时器否则会一会运行下去影响浏览器性能

最后编辑于：2019.01.08 14:25:45