設(shè)置安卓視頻不全屏播放（不知道是不是全部安卓機(jī)型都支持）的方法
前兩天做了一個石頭剪刀布的視頻游戲項(xiàng)目，測試過程中找到了更加簡便的方法，分享下，如下設(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í)測，不可加以下屬性設(shè)置，否則還是會跳出黑底全屏播放
x5-video-player-type='h5' x5-video-player-fullscreen='true'
注意的細(xì)節(jié)就是，（只是安卓機(jī)）當(dāng)視頻播放后：
1、它的層級比較高，當(dāng)有設(shè)置定位的彈層顯示后,即使設(shè)置z-index層級特別高，還是會被播放過的視頻擋住的（我這邊解決方法就是當(dāng)顯示彈層時隱藏視頻，關(guān)閉彈層再顯示視頻），也就是說此視頻不可設(shè)置被其它元素遮擋，它永遠(yuǎn)是在最上層的
2、如果有背景音樂播放時，當(dāng)視頻播放后，背景音樂自動停止且不會在視頻播放完后再繼續(xù)播放
IOS設(shè)置屬性：
webkit-playsinline="true" playsinline="true"
使用canvas解決：
安卓微信中播放視頻時總是會自動在新窗口全屏播放視頻，而且播放結(jié)束后自動推送多個視頻列表展示給用戶選擇，但有時候我們就是需要視頻能夠局部區(qū)域播放
下面貼出解決辦法：
1、HTML中
① 給video標(biāo)簽增加屬性，使瀏覽器調(diào)用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");
//設(shè)置畫布
var TestCanvas2D=TestCanvas.getContext('2d');
//設(shè)置setinterval定時器
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);
測試的demo中，對安卓和蘋果手機(jī)進(jìn)行了判斷，因?yàn)榇蠹覒?yīng)該都知道，蘋果手機(jī)在播放視頻時設(shè)置video的playsinline="true"屬性后，視頻就可以局部區(qū)域播放了，界面友好，而安卓則比較讓人頭痛，所以只需對安卓機(jī)進(jìn)行以上（HTML/CSS/JS）設(shè)置即可
蘇公網(wǎng)安備 32070502010230號