設(shè)置安卓視頻不全屏播放（不知道是不是全部安卓機(jī)型都支持）的方法
前兩天做了一個(gè)石頭剪刀布的視頻游戲項(xiàng)目，測(cè)試過(guò)程中找到了更加簡(jiǎn)便的方法，分享下，如下設(shè)置HTML代碼：
<video id="videoID" controls src="demo.mp4" poster="demo.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"></video>


安卓設(shè)置屬性：
x5-playsinline="true"
實(shí)測(cè)，不可加以下屬性設(shè)置，否則還是會(huì)跳出黑底全屏播放
x5-video-player-type='h5' x5-video-player-fullscreen='true'


注意的細(xì)節(jié)就是，（只是安卓機(jī)）當(dāng)視頻播放后：
1、它的層級(jí)比較高，當(dāng)有設(shè)置定位的彈層顯示后,即使設(shè)置z-index層級(jí)特別高，還是會(huì)被播放過(guò)的視頻擋住的（我這邊解決方法就是當(dāng)顯示彈層時(shí)隱藏視頻，關(guān)閉彈層再顯示視頻），也就是說(shuō)此視頻不可設(shè)置被其它元素遮擋，它永遠(yuǎn)是在最上層的
2、如果有背景音樂(lè)播放時(shí)，當(dāng)視頻播放后，背景音樂(lè)自動(dòng)停止且不會(huì)在視頻播放完后再繼續(xù)播放

IOS設(shè)置屬性：
webkit-playsinline="true" playsinline="true" 


使用canvas解決：
安卓微信中播放視頻時(shí)總是會(huì)自動(dòng)在新窗口全屏播放視頻，而且播放結(jié)束后自動(dòng)推送多個(gè)視頻列表展示給用戶選擇，但有時(shí)候我們就是需要視頻能夠局部區(qū)域播放

下面貼出解決辦法：
1、HTML中
① 給video標(biāo)簽增加屬性，使瀏覽器調(diào)用h5原生video
 <video id="testVideo" x5-video-player-type='h5' x5-video-player-fullscreen='true'>
②在頁(yè)面中添加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");
//設(shè)置畫布
var TestCanvas2D=TestCanvas.getContext('2d');
//設(shè)置setinterval定時(shí)器
var TestVideoTimer=null;
//監(jiān)聽播放
TestVideo.addEventListener('play',function() {
    TestVideoTimer=setInterval(function() {
        TestCanvas2D.drawImage(TestVideo,0,0,videoW,videoH);
    },20);
},false);
//監(jiān)聽暫停
TestVideo.addEventListener('pause',function() {
    clearInterval(TestVideoTimer);
},false);
//監(jiān)聽結(jié)束
TestVideo.addEventListener('ended',function() {
    clearInterval(TestVideoTimer);
},false);

 
測(cè)試的demo中，對(duì)安卓和蘋果手機(jī)進(jìn)行了判斷，因?yàn)榇蠹覒?yīng)該都知道，蘋果手機(jī)在播放視頻時(shí)設(shè)置video的playsinline="true"屬性后，視頻就可以局部區(qū)域播放了，界面友好，而安卓則比較讓人頭痛，所以只需對(duì)安卓機(jī)進(jìn)行以上（HTML/CSS/JS）設(shè)置即可