HTML5音频播放在移动端有局限性，在移动版 Safari 中加载的页面上，不能自动播放音频文件。音频文件只能从用户触发的触摸（单击）事件加载。如果在 HTML 标记中使用了 autoplay 属性，那么移动版 Safari 将会忽略这个属性，并且不会在加载页面时播放此文件，避免移动端流量在不知不觉中浪费，很人性化的设计。但对HTML5应用开发者来说，这不是个好消息。
1.音乐自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio hidden="hidden" id="audio">
<source src="alcohol.mp3" type="audio/mp3">
<embed height="50px" width="100px" src="alcohol.mp3">
</audio>
<script src=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
wx.config({
debug: false,
appId: 'wxcee5eba3aba35e35',
timestamp: 1559524606,
nonceStr: 'fd6e1bfe6ead430db24a9bba4afbbc5f',
signature: '7f3c14f2817f58321e7cce1ecc7c682bc4ad95c2',
jsApiList: [
'checkJsApi',
'getLocation'
]
});
// setTimeout("getLocation()","3000");
wx.ready(function(){
});
Orderprocessing();
function autoPlayAudio() {
wx.ready(function() {
// document.getElementById('audio').play();
var vid = document.getElementById("audio");//获取音频对象
vid.play();
});
}
function Orderprocessing(){
var vid = document.getElementById("audio");//获取音频对象
var start = 0;//定义循环的变量
var times=3;//定于循环的次数
autoPlayAudio(vid);
if(vid.paused) {
vid.play();// 这个就是播放
}
vid.addEventListener("ended",function() {
autoPlayAudio(vid);
if(vid.paused) {
vid.play();// 这个就是播放
}
start++;//循环
start == times && vid.pause();//也就是当循环的变量等于次数的时候，就会终止循环并且关掉音频
});
}
</script>
</body>
</html>
2.视频自动播放
<audio preload="preload" controls id="car_audio" src="test.mp3" loop></audio>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="test.png">
<source id="mp4" src="test.mp4" type="video/mp4">
<source id="webm" src="test.webm" type="video/webm">
<source id="ogv" src="test.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
document.getElementById('car_audio').play();
document.getElementById('video').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('car_audio').play();
document.getElementById('video').play();
}, false);
</script>
ps:其中使用的音频文件请自己替换。
