HTML5页面音视频在微信和app下自动播放的实现方法
5星 · 超过95%的资源 7 浏览量
2021-01-19
21:35:20
上传
评论 1
收藏 38KB PDF 举报 
HTML5页面音视频在微信和页面音视频在微信和app下自动播放的实现方法下自动播放的实现方法
现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？
纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也
不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。
这样做主要是为了防止不必要的自动播放浪费流量。
以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放
XML/HTML Code复制内容到剪贴板
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();
}
}
以上所述是小编给大家介绍的HTML5页面音视频在微信和app下自动播放的实现方法，希望对大家有所帮助，如果大家有任何
疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
资源评论
尹子先生2023-07-25这篇文件针对HTML5页面音视频在微信和app下自动播放的问题提供了一些有用的解决方法。
张博士-体态康复2023-07-25文件中的方法与技巧很实用，能够帮助开发者更好地控制音视频在微信和app中的播放行为。
养生的控制人2023-07-25这篇文件简洁明了地介绍了一些实现自动播放的技术，对于初学者来说也很友好。
AIAlchemist2023-07-25这篇文件对于想要在微信和app中实现音视频自动播放的开发者来说是非常有帮助的。
wxb0cf756a5ebe75e92023-07-25尽管这篇文件的内容可能有一些限制，但它依然是一个值得阅读的文件，能够为开发者提供一些有用的思路。
