使用HTML5连续播放视频

Question

使用HTML5连续播放视频

8

我正在按照以下代码依次播放视频：

<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制作它们的队列并逐个播放？

- Rohit

这两个链接 http://stackoverflow.com/questions/20945886/video-queue-in-html5 和 https://dev59.com/lnrZa4cB1Zd3GeqP9PRv 是否存在重复内容？ - Milche Patern

4个回答

0

您的变量不一致：

更改

videoplayer.src=nextvid;

到

videoPlayer.src = nextvid;

另外，根据您提供的解决方案，似乎该用户通过使用 JavaScript 绑定而不是使用 onended 属性来修复了它。您尝试过这个方法吗？

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

- ddavison

我试过了。即使我进行了更正，但它仍然无法运行。 - Rohit

0

不太确定，但我曾经用图片做过类似的事情。尝试使用 if 语句来判断视频是否已播放完毕或按钮是否已被按下，然后将视频的 src 更改为数组中的下一个视频，例如： $("#my_videos").attr("src",videos[turn]);

- tnyN

0

1. 尝试从服务器获取视频文件列表作为响应。 2. 将响应存储在一个数组中，命名为“playlist”。 3. 然后将视频源更改为 player.src=playlist[count]。这里的“count”与您当前使用的计数器相同。

- Manoraj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3549400 · Accepted Answer

这个对我有效 :)

<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>