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

【问题标题】：Playing videos one after another in html5在html5中一个接一个地播放视频
【发布时间】：2014-01-06 04:18:36
【问题描述】：

我在下面的代码中一个接一个地播放视频，

<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 让他们的队列和播放一个接一个呢？？

【问题讨论】：

是stackoverflow.com/questions/20945886/video-queue-in-html5 和stackoverflow.com/questions/20942900/… 重复？

标签： javascript html video

【解决方案1】：

这对我有用:)

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

【讨论】：

这很好用。只是因为我使用的是 Vue.js，所以我需要稍作修改
不确定你为什么只在这一行上使用 JQuery：$(mp4Vid).attr('src', "video/video"+count+".mp4");可以是mp4Vid.setAttribute("src","video/video"+count+".mp4");
这里的问题，至少在反应中。是否重新下载媒体。尚未找到不涉及创建单个视频标签的解决方案

【解决方案2】：

您的变量不一致：

改变

videoplayer.src=nextvid;

到

videoPlayer.src = nextvid;

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

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

【讨论】：

是的，我试过了。即使它不起作用，我做了更正仍然不起作用..

【解决方案3】：

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

【讨论】：

【解决方案4】：

尝试从服务器获取视频文件列表作为响应。
将响应存储在一个数组中，比如“播放列表”。
然后将视频 src 更改为 player.src=playlist[count]。这里的“count”就是你现在使用的那个计数器。

【讨论】：