Video在网页和移动端无法自动播放问题??
?<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)。
| <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)播放:
?
實(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
?
總結(jié)
以上是生活随笔為你收集整理的Video在网页和移动端无法自动播放问题??的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 速学c++(1)-c++简介
- 下一篇: 使用TortoiseGit(小乌龟)操作