常見(jiàn)問(wèn)題和解決方案：
1锌俱、video添加自動(dòng)播放屬性autoplay晤郑，無(wú)法正常播放視頻。
解決方案：
需要在video標(biāo)簽中添加muted屬性
<video muted src="" autoplay loop></video>但是設(shè)置muted之后嚼鹉，它規(guī)定視頻的音頻輸出時(shí)應(yīng)該被 靜音贩汉。
2、在一些安卓瀏覽器播放視頻的時(shí)候锚赤，不能在H5頁(yè)面播放視頻，系統(tǒng)會(huì)自動(dòng)接管視頻褐鸥。
解決方案：
添加內(nèi)聯(lián)播放屬性线脚；
如果需要在H5頁(yè)面內(nèi)播放視頻，需要在video標(biāo)簽加上webkit-playsinline叫榕，在一些ios上還需要加上playsinline浑侥。
可以同時(shí)加上這兩個(gè)屬性：
<video muted src="" autoplay webkit-playsinline playsinline ></video>
有些app還需要支持內(nèi)聯(lián)播放的模式，這時(shí)候需要加上：
webview.allowsInlineMediaPlayback = YES;
3晰绎、可能是視頻被接管的原因寓落，移動(dòng)端播放視頻有時(shí)候無(wú)法直接播放或有卡頓的現(xiàn)象。
解決方案：
啟用H5內(nèi)核H5播放器;
在video標(biāo)簽中添加啟動(dòng)H5播放的屬性：x5-video-player-type="h5"
如：<video muted src="" autoplay loop x5-video-player-type="h5"></video>
4荞下、video無(wú)法鋪滿整個(gè)屏幕
解決方案：
video標(biāo)簽加上
style="width= 100%; height=100%; object-fit: fill"伶选；
5史飞、移動(dòng)端①播放時(shí)，點(diǎn)擊暫停并出現(xiàn)蒙層仰税；②暫停時(shí)构资，點(diǎn)擊播放并且蒙層消失；
①創(chuàng)建一個(gè)蒙層的div陨簇，使用video的方法：播放play()吐绵、暫停pause()；
②使用事件委托也是可以實(shí)現(xiàn)的河绽；
蒙層制作可以參考fixed布局應(yīng)用場(chǎng)景-遮罩層
參考思路和代碼（樣式不寫啦）：
<!-- video -->
<div class="video-wrap">
<video id="video" class="myVideo" src="" poster="" width="100%" height="100%" object-fit:fill
webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientation="portraint">
Your browser does not support HTML5 video.
</video>
</div>
<!-- like_icon -->
<div class="likeIcon-wrap">
<div class="like-icon" data-key="on"></div>
<div class="like-num"></div>
</div>
<!-- mask -->
<div class="video-mask"></div>
<!-- pause_icon -->
<div class="video-pause"></div>
$(document).ready(function () {
// video play
$('.video-mask').on('click', function () {
maskCancel();
$('#video').get(0).play(); //play不是jQuery函數(shù)己单，而是DOM函數(shù)，需要通過(guò)DOM來(lái)調(diào)用play
})
// video pause
$('.video-wrap').on('click', function () {
$('#video').get(0).pause();
maskShow();
})
// 監(jiān)聽(tīng)視頻播放耙饰，結(jié)束時(shí)出現(xiàn)暫停按鈕和蒙層
$('#video').on('ended', function () {
maskShow();
})
})
var video_mask = $(".video-mask"),
video_pause = $(".video-pause"),
video = $("#video");
//video-mask/video-pause show
function maskShow() {
video_mask.css('display', 'block');
video_pause.css('display', 'block');
}
//video-mask/video-pause cancel
function maskCancel() {
video_mask.css('display', 'none');
video_pause.css('display', 'none');
}
6荷鼠、監(jiān)聽(tīng)視頻是否結(jié)束
主要用到的是 監(jiān)聽(tīng)的 ended事件；
//js寫法
var video=document.getElementById("video");
video.addEventListener('ended', function () {
console.log('play over!');;
}, false);
//jQuery寫法
$('#video').on('ended',function(){
console.log('play over!');
})
注意：addEventListener是js的監(jiān)聽(tīng)事件榔幸，如果在jQuery中這樣使用是會(huì)出錯(cuò)的允乐，在jQuery中監(jiān)聽(tīng)可以使用on。
7削咆、關(guān)于jQuery使用H5視頻播放事件play()牍疏、暫停事件pause()出錯(cuò)問(wèn)題：
在js中使用document.getElementById(‘video’).play();是可以的；
但是在jQuery中使用$('#video').play()就是錯(cuò)誤的拨齐。
原因：H5的play()/pause()都不是 jQuery函數(shù)鳞陨，而是DOM函數(shù)，如果jQuery要使用play()/pause(),需要通過(guò)DOM來(lái)調(diào)用play()/pause()
如：$('#video').get(0).play()
8瞻惋、關(guān)于H5中的自定義屬性
H5標(biāo)準(zhǔn)規(guī)定厦滤，自定義的屬性都以
data-*開(kāi)頭,這樣區(qū)分了固有屬性和自定義屬性，我們可以通過(guò)原生js的getAttribute()和jQuery中的attr()來(lái)獲取我們自定義的屬性歼狼。如：<div data-name="test">leaf</div>
總之掏导，在這過(guò)程中遇到了很多問(wèn)題，有些還沒(méi)想起來(lái)羽峰，等想起來(lái)再去完善記錄吧趟咆，這邊簡(jiǎn)單記錄一下。如果文章對(duì)你有用就點(diǎn)個(gè)小心心鼓勵(lì)一下吧梅屉。
