?<video>?標簽介紹

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

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

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

Element谷歌IE火狐safariopera

<video>	4.0	9.0	3.5	4.0	10.5

?

提示和注釋

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

---

可選屬性

New：HTML5 中的新屬性。

屬性值描述

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

?

?

?

?<video>標簽已經添加 autoplay="autoplay" 不能自動播放的問題？

?

以下原因可能導致不能自動播放：

chrome6以及更高的版本不允許媒體自動播放；

safari 阻止自動播放視頻。opera?阻止autoplay；

出于用戶體驗，節省流量的考慮，移動端禁止自動播放；

視頻文件太大，加載時間過長或錯誤；

?

實現自動播放策略：

• 靜音自動播放總是被允許的。
• 用戶已經產生交互（點擊觸摸滑動等..） ，這里的交互指的是只要用戶在頁面中用有了操作，而不是說一定要用戶點擊audio或者video去播放
• 使用iframe授權自動播放
• chrome提高MEI指數（?）
• 移動端用戶將網站添加到home screen(沒試過)

?

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

?

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

?

2、在用戶交互(點擊，觸摸滑動等操作)后，使用.paly()方法播放。注意：用戶沒有產生交互前調用play()會拋出異常。

/**video.play()返回一個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('可以自動播放'); }).catch((err)=>{console.log(err);console.log("不允許自動播放");//視頻元素可以選擇靜音后再播放,提示用戶打開聲音video.muted=true;video.play();//也可以在用戶交互后調用.play()// ... });audioPlay.then(()=>{console.log('可以自動播放'); }).catch((err)=>{console.log(err);console.log("不允許自動播放");//音頻元素只在用戶交互后調用.play(),// ... });

?

3、使用iframe允許自動播放。

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

?

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

?

5、android 4.2 webview：添加了是否需要用戶手勢去觸發音視頻的播放開關，默認為true(需要用戶手勢觸發)。
將webview的這個開關設置為不需要用戶觸發：mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);

IOS h5 webview? ：IOS APP給webview設置mediaPlaybackRequiresUserAction后可以允許自動播放.

?

?

?

參考網址：https://www.jianshu.com/p/c3c6944eed5a
?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。