最新的設定安卓視訊不全屏播放（不知道是否全部安卓機型都支援）的方法
前兩天做了一個石頭剪刀布的視訊遊戲專案，測試過程中找到了更加簡便的方法，分享下，如下設定HTML程式碼：
<video id="videoID" controls src="XXX" poster="XXX.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"></video>

安卓設定屬性：
 x5-playsinline="true"
實測，不可加以下屬性設定，否則還是會跳出黑底全屏播放
 x5-video-player-type='h5' x5-video-player-fullscreen='true'

注意的細節就是，（只是安卓機）當視訊播放後：
　　1、它的層級比較高，當有設定定位的彈層顯示後,即使設定z-index層級特別高，還是會被播放過的視訊擋住的（我這邊解決方法就是當顯示彈層時隱藏視訊，關閉彈層再顯示視訊），也就是說此視訊不可設定被其它元素遮擋，它永遠是在最上層的
　　2、如果有背景音樂播放時，當視訊播放後，背景音樂自動停止且不會在視訊播放完後再繼續播放

 IOS設定屬性：

 webkit-playsinline="true" playsinline="true" 

*****************************************************************************************

使用canvas解決：

安卓微信中播放視訊時總是會自動在新視窗全屏播放視訊，而且播放結束後自動推送多個視訊列表展示給使用者選擇，但有時候我們就是需要視訊能夠區域性區域播放

找了一年多的答案終於有了結果了

下面貼出解決辦法：

1、HTML中
① 給video標籤增加屬性，使瀏覽器呼叫h5原生video
 <video id="testVideo" x5-video-player-type='h5' x5-video-player-fullscreen='true'>
②在頁面中新增canvas畫布
<canvas id="testCanvas"></canvas>

2、CSS中，使video隱藏

video{display:none}

3、js程式碼配置
/*以下是渲染CANVAS畫布中的視訊*/
//獲取video
var TestVideo=document.getElementById("testVideo");
//獲取canvas畫布
var TestCanvas=document.getElementById("testCanvas");
//設定畫布
var TestCanvas2D=TestCanvas.getContext('2d');
//設定setinterval定時器
var TestVideoTimer=null;
//監聽播放
TestVideo.addEventListener('play',function() {
    TestVideoTimer=setInterval(function() {
        TestCanvas2D.drawImage(TestVideo,0,0,videoW,videoH);
    },20);
},false);
//監聽暫停
TestVideo.addEventListener('pause',function() {
    clearInterval(TestVideoTimer);
},false);
//監聽結束
TestVideo.addEventListener('ended',function() {
    clearInterval(TestVideoTimer);

},false);

　　測試的demo中，對安卓和蘋果手機進行了判斷，因為大家應該都知道，蘋果手機在播放視訊時設定video的playsinline="true"屬性後，視訊就可以區域性區域播放了，介面友好，而安卓則比較讓人頭痛，所以只需對安卓機進行以上（HTML/CSS/JS）設定即可

下面貼圖是demo的測試截圖：