背景

項目是做短視頻的 所以有個視頻分享功能，視頻分享出來以后的要求是H5要以##video為背景（還要可以控制暫停播放），視頻上要放一下懸浮層，用以展示視頻的##基本信息 和下載引導按鈕

遇到的問題

1 要考慮ios和Android系統(tǒng)自帶的視頻播放控件，還要考慮微信的內(nèi)置X5瀏覽器
ios上視頻控件還可以去除 然后自己定義播放暫停沒問題，
但是Android視頻播放控件下面一排的控件可以去除，但是視頻中間的暫停播放按鈕去除不了
2手機瀏覽器自帶的視頻插件會在視頻播放的時候 video層級最高，之前Video上的浮層就看不到了，無論定位后z-index設置多大都沒用
3視頻在播放的時候 不同的手機會出現(xiàn)全屏的情況，這與之前的作為背景的初衷就不同了

基于以上原因，導致在不同設備上使用video標簽會不盡人意，同時對于ios與Android對視頻的渲染也有所差別，代碼實現(xiàn)起來有點繁瑣

經(jīng)過多方百度 終于找到了符合要求的方法 將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;//視頻播放狀態(tài)
              $('#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(){ //初始化暫停狀態(tài)下 點擊播放（開始繪制視頻） 
                      video.play();
                      $('.palyChange').hide();
                      isplay=false;
                      draw1();
              });

上面canvas繪制視頻的時候 放大倍數(shù)不宜過大 我這里是放大倍數(shù)過大以后 在微信置X5瀏覽器上顯示有問題（會出不來）
上面利用的定時器循環(huán)繪制視頻：由于一般的MP4視頻一秒鐘多為24幀 30幀
所以為保證貼近真實的video視頻播放 這里的setInterval 給的時間不宜太?。〞D） 太大（會有快進跳躍的感覺）由于使用到了定時器 所以在視頻暫停后清除定時器 否則會一會運行下去 影響瀏覽器性能