现在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();

}

}