在html5中一个接一个地播放视频

时间:2014-01-06 04:18:37

标签: javascript html5 video

我正在按照以下代码一个接一个地播放视频,

<html>
<body>
    <video src="videos/video1.mp4" id="myVideo" autoplay>
        video not supported
    </video>
</body>
    <script type='text/javascript'>
        var count=1;
    var player=document.getElementById('myVideo');
    player.addEventListener('ended',myHandler,false);

    function myHandler(e) {
        if(!e) 
        { e = window.event; }
        count++;
        player.src="videos/video"+count+".mp4";
        }
</script>

现在,我的问题是,有许多视频文件具有不同的名称(在远程目录中),它们位于服务器上 我不知道所有文件的名称。那么如何使用JavaScript一个接一个地排队和玩?

4 个答案:

答案 0 :(得分:5)

这项工作对我来说:)

<video width="256" height="192"  id="myVideo" controls autoplay>
    <source src="video/video1.mp4" id="mp4Source" type="video/mp4">
    Your browser does not support the video tag.
</video>

<script type='text/javascript'>
   var count=1;
   var player=document.getElementById('myVideo');
   var mp4Vid = document.getElementById('mp4Source');
   player.addEventListener('ended',myHandler,false);

   function myHandler(e)
   {

      if(!e) 
      {
         e = window.event; 
      }
      count++;
      $(mp4Vid).attr('src', "video/video"+count+".mp4");
      player.load();
      player.play();
   }

</script>

答案 1 :(得分:0)

您的变量不一致:

更改

videoplayer.src=nextvid;

videoPlayer.src = nextvid;

另外,根据您链接的解决方案,用户似乎通过javascript绑定它而不是使用onended属性来修复它。你试过了吗?

videoPlayer.onended(function(e) {
 run();
};

答案 2 :(得分:0)

不确定,但我做了类似的照片。尝试使用if语句来确定视频是否已完成播放或按下按钮,然后将视频的src更改为数组ex中的下一个视频: $( “#的my_videos”)ATTR( “SRC”,影片[匝]);

答案 3 :(得分:0)

  1. 尝试将视频文件列表作为服务器的响应。
  2. 将响应存储在数组中,说“播放列表”。
  3. 然后将视频src更改为player.src = playlist [count]。这里“计数”与你现在使用的计数器相同。