连续播放视频

时间:2011-07-12 14:34:45

标签: javascript html html5 video html5-video

我目前有这个:

的Javascript

<script>
$('document').ready(function(){
  $('video').get(0).play();
 // $('video').bind('ended', function(){
 //   $(this).next('video');
 // });
  $('video').each(function(val, index){
    $(this).bind('ended', function(){
      $(this).get(index + 1).play();
    });
  });
});
</script>

HTML

<video width="703" height="704" controls preload="auto" src="LOW.mp4">Video format not supported.</video>

<h3>CBS - m4v</h3>
<video width="703" height="704" controls preload="auto" src="1100.m4v">Video format not supported.</video>

<h3>Video #3</h3>
<video width="703" height="704" controls preload="auto" src="yep.mp4">Video format not supported.</video>

现在,javascript无效。如何在第一个视频完成后立即播放下一个视频,然后在第二个视频完成后播放第三个视频。并不总是有3个视频,而且还有更多。

1 个答案:

答案 0 :(得分:1)

您的脚本中有两个小错误,以下代码未经测试,但应该有效:

$(function(){
    var videos = $('video').each(function(index){
        $(this).bind('ended', function(){
            var video = videos[index + 1];
            video && video.play();
        });
    });
    if(videos.get(0).play){
        videos.get(0).play();
    }
});

以下是您的一些错误:

  1. each(fn(val,index){})每个回调调用index作为第一个参数,元素作为第二个参数(每个(fn(index,video){})
  2. $(this).get(index + 1)这个引用视频元素而不是视频列表(+索引也是视频,见上文)