HTML5网页页面音视頻在手机微信和app下全自动播发

日期:2021-02-24 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

如今绝大多数的H5网页页面都有完成播发情况歌曲,播发视頻作用。那如何完成全自动播发呢?

纯H5网页页面在手机上端中是没法完成全自动播发,挪动端访问器绝大多数是禁用video和audio的autoplay作用而且,许多挪动访问器也不适用初次js启用play方式开展播发(仅有客户手动式点播发后中止,随后用编码开展play能够)。

这样做关键是以便避免无须要的全自动播发消耗总流量。

下列编码是完成客户第1次触碰后完成的播发和手机微信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下全自动播发的完成方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:HTML5 canvas基础制图之文本3D渲染 返回下一篇:没有了