欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-26 17:21:58
现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?下面小编给大家带来了HTML5页面音视频在微信和app下自动播放的实现方法... 16-10-20...

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

(0)
打赏 HTML5页面音视频在微信和app下自动播放的实现方法 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

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