现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?
纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能并且,很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。
这样做主要是为了防止不必要的自动播放浪费流量。
以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放
function autoplayMusic() { /* 自动播放音乐效果,解决浏览器或者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(); } }
原文地址:https://www.jb51.cc/html5/1200259.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。