您當前位置：圖趣網（Tuquu） >> 網頁設計教程 >> 移動前端 >> 瀏覽設計教程

HTML5頁面音視頻在微信和app下主動播放的實現方法

2016/12/27 14:54:17來源：互聯(lián)網

如今大部分的H5頁面都有實現播放背景音樂，播放視頻功能。那怎么實現主動播放呢？

純H5頁面在手機端中是無法實現主動播放，移動端欣賞器大部分是禁用video和audio的autoplay功能并且，許多移動欣賞器也不支撐首次js調用play方法進行播放（只有效戶手動點播放后停息，然后用代碼進行play可以）。

如許做重要是為了防止不需要的主動播放虛耗流量。

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

XML/HTML Code復制內容到剪貼板
  1. function autoPlayMusic() {   
  2.     /* 主動播放音樂結果，解決欣賞器或者APP主動播放題目 */   
  3.     function musicInBrowserHandler() {   
  4.         musicPlay(true);   
  5.         document.body.removeEventListener('touchstart', musicInBrowserHandler);   
  6.     }   
  7.     document.body.addEventListener('touchstart', musicInBrowserHandler);   
  8.     /* 主動播放音樂結果，解決微信主動播放題目 */   
  9.     function musicInWeixinHandler() {   
  10.         musicPlay(true);   
  11.         document.addEventListener("WeixinJSBridgeReady", function () {   
  12.             musicPlay(true);   
  13.         }, false);   
  14.         document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);   
  15.     }   
  16.     document.addEventListener('DOMContentLoaded', musicInWeixinHandler);   
  17. }   
  18. function musicPlay(isPlay) {   
  19.     var media = document.getElementById('myMusic');   
  20.     if (isPlay && media.paused) {   
  21.         media.play();   
  22.     }   
  23.     if (!isPlay && !media.paused) {   
  24.         media.pause();   
  25.     }   
  26. }  

以上所述是小編給大家介紹的HTML5頁面音視頻在微信和app下主動播放的實現方法，盼望對大家有所幫助，假如大家有任何疑問請給我留言，小編會及時回復大家的。在此也特別很是感謝大家對圖趣網網站的支撐！

[教程作者：佚名]
關鍵詞：頁面 視頻 下自 自動 播放 放的 實現 方法
免責聲明：本站文章系圖趣網整理發(fā)布，如需轉載，請注明出處，素材資料僅供個人學習與參考，請勿用于商業(yè)用途！
本文地址：http://m.pkvc.cn/tutorial/wd3330.html
解決canvas轉base64jpeg時透明區(qū)域變成黑色背景的方法
淺談html5標簽css3的常用樣式
圖趣網微信
建議反饋
×