HTML5实现audio/video自动连播

HTML5终将取代Flash,但由于HTML5本身的<audio>、<video>扩展功能贫乏,通过javascript的事件监听可以达到音视频文件的自动连播。

这里只做简单的示例,可自行修改是当前页播放还是跳页播放,video同理。

<div id="webvideo"></div>
<div id="auto" class="auto">
    <p>1秒后自动播放下一首</p>
</div>
<div id="max" class="auto">
    <p>已至列表末端,请返回</p>
</div>
<script>
  var board = document.getElementById("webvideo");
  var audio = document.createElement("audio");
  audio.src = "/1.mp3";
  audio.controls = 'controls';
  var object = board.appendChild(audio);

  audio.addEventListener('ended', function () {
        setTimeout(function () {
      $('#auto').show();
    }, 500);
    setTimeout(function () {
      location.href= "/2.html";
    }, 1500);
      }, false);
  audio.play();
</script>