HTML5页面音视频在微信和app下自动播放的实现方法
导读:收集整理的这篇文章主要介绍了HTML5页面音视频在微信和app下自动播放的实现方法,觉得挺不错的,现在分享给大家,也给大家做个参考。 现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?纯H5页面在手机端...
收集整理的这篇文章主要介绍了HTML5页面音视频在微信和app下自动播放的实现方法,觉得挺不错的,现在分享给大家,也给大家做个参考。 现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?
纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能并且,很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。
这样做主要是为了防止不必要的自动播放浪费流量。
以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放
XML/HTML Code复制内容到剪贴板- function autoPlayMusic() { @H_512_23@ /* 自动播放音乐效果,解决浏览器或者APP自动播放问题 */
- function musicInbrowserHandler() {
- musicPlay(true);
- document.body.removeEventListener('touchstart', musicInBrowserHandler);
- }
- document.body.addEventListener('touchstart', musicInBrowserHandler);
- /* 自动播放音乐效果,解决微信自动播放问题 */
- function musicInWeixinHandler() {
- musicPlay(true);
- document.addEventListener("WeixinJSBridgeReady", function () {
- musicPlay(true);
- } , false);
- document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
- }
- document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
- }
- function musicPlay(isPlay) {
- VAR media = document.getElementById('myMusic');
- if (isPlay & & media.paused) {
- media.play();
- }
- if (!isPlay & & !media.paused) {
- media.pause();
- }
- }
以上所述是小编给大家介绍的HTML5页面音视频在微信和app下自动播放的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5页面音视频在微信和app下自动播放的实现方法
本文地址: https://pptw.com/jishu/585612.html