您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

HTML5頁(yè)面音視頻在微信和app下主動(dòng)播放的實(shí)現(xiàn)方法

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

如今大部分的H5頁(yè)面都有實(shí)現(xiàn)播放背景音樂，播放視頻功能。那怎么實(shí)現(xiàn)主動(dòng)播放呢？

純H5頁(yè)面在手機(jī)端中是無法實(shí)現(xiàn)主動(dòng)播放，移動(dòng)端欣賞器大部分是禁用video和audio的autoplay功能并且，許多移動(dòng)欣賞器也不支撐首次js調(diào)用play方法進(jìn)行播放（只有效戶手動(dòng)點(diǎn)播放后停息，然后用代碼進(jìn)行play可以）。

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

以下代碼是實(shí)現(xiàn)用戶第一次觸摸后實(shí)現(xiàn)的播放和微信app下主動(dòng)播放

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. function autoPlayMusic() {   
  2.     /* 主動(dòng)播放音樂結(jié)果，解決欣賞器或者APP主動(dòng)播放題目 */   
  3.     function musicInBrowserHandler() {   
  4.         musicPlay(true);   
  5.         document.body.removeEventListener('touchstart', musicInBrowserHandler);   
  6.     }   
  7.     document.body.addEventListener('touchstart', musicInBrowserHandler);   
  8.     /* 主動(dòng)播放音樂結(jié)果，解決微信主動(dòng)播放題目 */   
  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頁(yè)面音視頻在微信和app下主動(dòng)播放的實(shí)現(xiàn)方法，盼望對(duì)大家有所幫助，假如大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也特別很是感謝大家對(duì)圖趣網(wǎng)網(wǎng)站的支撐！

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