当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5页面音视频在微信和app下自动播放的实现方法

HTML5页面音视频在微信和app下自动播放的实现方法

2019年07月25日  | 移动技术网IT编程  | 我要评论

境外自助游,暗黑3国服最新消息,btgirls漫画馆

现在大部分的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下自动播放的实现方法，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网