問題描述：
h5頁面內(nèi)使用video標(biāo)簽播放視頻，會自動(dòng)全屏；且不能自動(dòng)播放的問題
兩種情況：
一、普通瀏覽器內(nèi)
1>?解決全屏播放的問題方案：
標(biāo)簽內(nèi)添加屬性：
????webkit-playsinline="true"?
? ? x-webkit-airplay="true"
? ? playsInline={true}
? ? x5-playsinline="true"
? ? x5-video-orientation="portraint"
案例如下：
/* 標(biāo)簽內(nèi) 添加 以下幾個(gè)屬性*/
<video id="video1"
muted //靜音
webkit-playsinline="true"
x-webkit-airplay="true"
playsInline={true}
x5-playsinline="true"
x5-video-orientation="portraint"
width="100%"
autoPlay={true}
>
<source id="source1" src={`${home}?playsinline=1`} type="video/mp4"></source>
</video>2> 解決不能自動(dòng)播放情況
如上代碼案例中添加?muted ?靜音屬性，同時(shí)，使用js控制
var myVideo=document.getElementById("video1");
try {
myVideo.play();
} catch (error) {
console.log("video被阻止了,需要手動(dòng)觸發(fā)按鈕或別的事件，和用戶有交互后 ，再調(diào)用play()")
}
二、在app客戶端內(nèi)嵌入h5頁面
1>解決全屏播放的問題方案（h5和客戶端都需要處理）
首先h5頁面上需要在音頻資源后添加?playsinline=1?參數(shù)，然后客戶端配合修改視頻播放的默認(rèn)配置，如下圖所示：
<video id="video1" >
<source id="source1" src={`xxxxxxxx.mp4?playsinline=1`} type="video/mp4"></source>
</video>
app修改如圖上標(biāo)記位置或者代碼中修改?configuration.allowsInlineMediaPlayback = true;?
（具體代碼在哪問app相關(guān)人員）文章來源：http://www.zghlxwxcb.cn/news/detail-462204.html
三、多個(gè)視頻播放，需要預(yù)加載，減少卡頓情況，視頻加載完成前可以先添加一個(gè)封面進(jìn)行緩沖文章來源地址http://www.zghlxwxcb.cn/news/detail-462204.html
到了這里，關(guān)于h5使用video標(biāo)簽解決自動(dòng)全屏問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
