?<video>?標(biāo)簽介紹

<video> 標(biāo)簽定義視頻，比如電影片段或其他視頻流。支持三種視頻格式：MP4、WebM、Ogg。是H5的新標(biāo)簽，使用如下：

//autoplay表示視頻自動(dòng)播放，controls表示顯示視頻控制器，loop表示循環(huán)播放<video width="320" height="240" autoplay="autoplay" controls loop><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的瀏覽器不支持 video 標(biāo)簽。 </video>

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

Element谷歌IE火狐safariopera

<video>	4.0	9.0	3.5	4.0	10.5

?

提示和注釋

提示：可以在 <video> 和 </video> 標(biāo)簽之間放置文本內(nèi)容，這樣不支持 <video> 元素的瀏覽器就可以顯示出該標(biāo)簽的信息。

---

可選屬性

New：HTML5 中的新屬性。

屬性值描述

autoplayNew	autoplay	如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controlsNew	controls	如果出現(xiàn)該屬性，則向用戶(hù)顯示控件，比如播放按鈕。
heightNew	pixels	設(shè)置視頻播放器的高度。
loopNew	loop	如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。
mutedNew	muted	如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。
posterNew	URL	規(guī)定視頻正在下載時(shí)顯示的圖像，直到用戶(hù)點(diǎn)擊播放按鈕。
preloadNew	auto metadata none	如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
srcNew	URL	要播放的視頻的 URL。
widthNew	pixels	設(shè)置視頻播放器的寬度。

?

?

?

?<video>標(biāo)簽已經(jīng)添加 autoplay="autoplay" 不能自動(dòng)播放的問(wèn)題？

?

以下原因可能導(dǎo)致不能自動(dòng)播放：

chrome6以及更高的版本不允許媒體自動(dòng)播放；

safari 阻止自動(dòng)播放視頻。opera?阻止autoplay；

出于用戶(hù)體驗(yàn)，節(jié)省流量的考慮，移動(dòng)端禁止自動(dòng)播放；

視頻文件太大，加載時(shí)間過(guò)長(zhǎng)或錯(cuò)誤；

?

實(shí)現(xiàn)自動(dòng)播放策略：

• 靜音自動(dòng)播放總是被允許的。
• 用戶(hù)已經(jīng)產(chǎn)生交互（點(diǎn)擊觸摸滑動(dòng)等..） ，這里的交互指的是只要用戶(hù)在頁(yè)面中用有了操作，而不是說(shuō)一定要用戶(hù)點(diǎn)擊audio或者video去播放
• 使用iframe授權(quán)自動(dòng)播放
• chrome提高M(jìn)EI指數(shù)（?）
• 移動(dòng)端用戶(hù)將網(wǎng)站添加到home screen(沒(méi)試過(guò))

?

可以使用以下方式嘗試解決：

?

1、視頻元素添加muted 屬性，如<video controls muted>，Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 6 支持 muted 屬性。注意：?Internet Explorer 9 及更早IE版本不支持<video> 的 muted 屬性。

?

2、在用戶(hù)交互(點(diǎn)擊，觸摸滑動(dòng)等操作)后，使用.paly()方法播放。注意：用戶(hù)沒(méi)有產(chǎn)生交互前調(diào)用play()會(huì)拋出異常。

/**video.play()返回一個(gè)promise，未禁止則resolve，禁止則reject**/ let video = document.getElementById("video"); let audio = document.getElementById("audio"); let videoPlay = video.play(); let audioPlay = audio.play();videoPlay.then(()=>{console.log('可以自動(dòng)播放'); }).catch((err)=>{console.log(err);console.log("不允許自動(dòng)播放");//視頻元素可以選擇靜音后再播放,提示用戶(hù)打開(kāi)聲音video.muted=true;video.play();//也可以在用戶(hù)交互后調(diào)用.play()// ... });audioPlay.then(()=>{console.log('可以自動(dòng)播放'); }).catch((err)=>{console.log(err);console.log("不允許自動(dòng)播放");//音頻元素只在用戶(hù)交互后調(diào)用.play(),// ... });

?

3、使用iframe允許自動(dòng)播放。

<iframe src = "http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201808/10467.wav" allow = "autoplay"/>

?

4、可以將ogg轉(zhuǎn)為為mp4格式，盡量壓縮文件大小到2M以下，盡量將視頻文件放置在文件根目錄下；

?

5、android 4.2 webview：添加了是否需要用戶(hù)手勢(shì)去觸發(fā)音視頻的播放開(kāi)關(guān)，默認(rèn)為true(需要用戶(hù)手勢(shì)觸發(fā))。
將webview的這個(gè)開(kāi)關(guān)設(shè)置為不需要用戶(hù)觸發(fā)：mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);

IOS h5 webview? ：IOS APP給webview設(shè)置mediaPlaybackRequiresUserAction后可以允許自動(dòng)播放.

?

?

?

參考網(wǎng)址：https://www.jianshu.com/p/c3c6944eed5a
?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Video在网页和移动端无法自动播放问题？?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。