现在HTML5得到了广泛的应用不管是在微信还是在app中，特别是在微信开发中通常会遇到要实现音频或者视频的播放功能，如背景音乐，视频介绍等。如何实现自动播放功能呢？纯的H5页面在手机端中是无法实现自动播放的，移动端浏览器大部分是禁用video和audio的autoplay功能而且很多移动浏览器也不支持首次js调用play方法进行播放，只有用户手动点击了播放后暂停，然后用代码进行play就可以。这样做主要是为了防止一些不必要的自动播放浪费流量。
下面的代码是实现用户第一次触摸后实现的播放和微信app下的自动播放：
function autoPlay() {
/* 自动播放效果，解决浏览器或者APP自动播放问题 */
function browserHandler() {
startPlay(true);
document.body.removeEventListener('touchstart', browserHandler);
}
document.body.addEventListener('touchstart', browserHandler);
/* 自动播放效果，解决微信自动播放问题 */
function weixinHandler() {
startPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
startPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', weixinHandler);
}
document.addEventListener('DOMContentLoaded', weixinHandler);
}
function startPlay(isPlay) {
var media = document.getElementById('myMedia');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
注意：本文归作者所有，未经作者允许，不得转载
