最近一直在處理video標簽在IOS和Android端的兼容問題，其中遇到不少坑，絕大多數問題已經解決，下面是處理問題經驗的總結：

1.獲取視頻的第一幀作為背景圖；

技術：canvas繪圖

window.onload = function(){
   var video = document.getElementById(‘video‘);
   //使用嚴格模式
   ‘use strict‘;
   //第一幀圖片與原視頻的比例
   var scal = 0.8;
   //監聽頁面加載事件
   video.addEventListener(‘dataLoad‘,function(){
 
     //創建一個畫布
     var canvas = document.createElement(‘canvas‘);
     canvas.width = video.style.width*scal;
     canvas.height = video.style.height*scal;
     //繪制圖片
     canvas.getContentext(‘2d‘).drawImage(video,0,0,canvas.width,canvas.height);
     //設置標簽的poster屬性
     viseo.setAttribute("poster",canvas.toDataURL("image/png")
 
);
     
   });
}

2.禁止安卓手機自動全屏

video標簽在安卓系統下，默認全屏，通過添加屬性可以禁止全屏，

x5-playsinline="true"，切記添加該屬性後不能再有x5-video-player-type=‘h5‘ x5-video-player-fullscreen=‘true‘，否則還會默認全屏

3.播放視頻時，不能完全覆蓋的問題

此時需要給video標簽添加style樣式

width:100%;height:100%;object-fit:fill;

此外，video標簽的父元素應該設置寬高：width:100%;height:100%;

4.自動播放問題

在pc端，只需要給video標簽加上autoplay = ‘autoplay‘屬性即可，

在移動端需要使用js判斷

首先應在也頁面中引入<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

$(‘#video_play‘).play();
    
document.addEventListener(‘WeixinJSBridgeReady‘, function () {
                $(‘#video_play‘).play();
            
}, false);

在安卓中，是無法實現加載後自動播放功能的，需要引到用戶產生行為，觸發事件，

關於video標簽移動端開發遇到的問題，獲取視頻第一幀，全屏，自動播放，自適應等問題