autoplay在iphone/ipad

场景：autoplay在iphone/ipad中不能实现的有关问题

autoplay在iphone/ipad中不能实现的问题

html5中的音频和视频标签：

<video width="320" height="240" controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

问题：在iphone和ipad2上，autoplay失效，每次还是要点击之后才能播放。

页面加载后调用对应的play()方法也不能播放。但是在页面上用触摸或点击事件，调用play()方法可以播放。

暂时的解决方法：

1、通过iframe

var ifr=document.createElement("iframe");
ifr.setAttribute('src', "song.mp3");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');

ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);

2、通过页面上的其他触摸或者点击事件来调用对应的play()方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<script type="text/javascript" src="jquery-1.5.min.js">
</script>
<script type="text/javascript">

$(window).load(function(){

       $("#start").bind("touchstart",function(event){
           var myAudio = document.getElementById("audio");
            myAudio.play();
     });
})
</script>
</head>
<body >
<audio src="song.mp3" id="audio" controls></audio>
<br/>
<br/>
<br/>
<button id="start">开始</button><button id="pause">暂停</button>
</body>
</html>

相关推荐