h5video微信自動播放

① html5如何實現自動播放視頻

我們使抄用html5的video標簽，可以不依賴於任何第三方的插件或控制項，直接在瀏覽器中實現視頻播放功能。

註：html5的video標簽目前只支持播放.mp4、.ogg、.webm等幾種格式的視頻文件，暫不支持其他格式的視頻文件。此外，不同的html5瀏覽器支持的視頻文件格式也略有不同，這種狀況可能會在未來的html5中得以改善。

② 如何在網頁中自動播放視頻

HTML5 是下一代的 HTML， 提供了展示視頻的標准，規定了一種通過 video 元素來包含視頻的標准方法。

純H5頁面在手機端中是無法實現自動播放，移動端瀏覽器大部分是禁用video和audio的autoplay功能並且，很多移動瀏覽器也不支持首次js調用play方法進行播放（只有用戶手動點播放後暫停，然後用代碼進行play可以）。

這樣做主要是為了防止不必要的自動播放浪費流量。

以下代碼是實現用戶第一次觸摸後實現的播放和微信app下自動播放

XML/HTML Code復制內容到剪貼板

• functionautoPlayMusic(){

• /*自動播放音樂效果，解決瀏覽器或者APP自動播放問題*/

• functionmusicInBrowserHandler(){

• musicPlay(true);

• document.body.removeEventListener('touchstart',musicInBrowserHandler);

• }

• document.body.addEventListener('touchstart',musicInBrowserHandler);

• /*自動播放音樂效果，解決微信自動播放問題*/

• functionmusicInWeixinHandler(){

• musicPlay(true);

• document.addEventListener("WeixinJSBridgeReady",function(){

• musicPlay(true);

• },false);

• document.removeEventListener('DOMContentLoaded',musicInWeixinHandler);

• }

• document.addEventListener('DOMContentLoaded',musicInWeixinHandler);

• }

• functionmusicPlay(isPlay){

• varmedia=document.getElementById('myMusic');

• if(isPlay&&media.paused){

• media.play();

• }

• if(!isPlay&&!media.paused){

• media.pause();

• }

• }

Video有以下的屬性。

height pixels 設置視頻播放器的高度。

loop loop 如果出

現該屬性，則當媒介文件完成播放後再次開始播放。

preload preload 如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。

autoplay autoplay 如果出現該屬性，則視頻在就緒後馬上播放。

controls controls 如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。

如果使用 "autoplay"，則忽略該屬性。

src url 要播放的視頻的 URL。

width pixels 設置視頻播放器的寬度。

其中，如果想要實現自動播放，可以在Video裡面加上autoplay屬性就可以了。