使用 <video> 标签在 Chrome 中按顺序播放两个视频答案

【问题标题】：PLaying two videos in sequence in Chrome by using the <video> tag使用 <video> 标签在 Chrome 中按顺序播放两个视频
【发布时间】：2011-11-04 10:00:39
【问题描述】：

如何在 HTML5 视频标签中依次播放两个视频？

在 Google Chrome 中，以下代码仅播放第一个介绍视频。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>

var i = 0;
var sources = ['1.mp4', '2.mp4'];
videoElement.addEventListener('ended', function(){
   videoElement.src = sources[(++i)%sources.length];
   videoElement.load();
   videoElement.play();
}, true);

</script>

</head>
<body>
<video id="videoElement" width="640" height="360" autoplay="autoplay">
    <source src="intro.mp4" type="video/mp4"></source>
</video>

<body>
<html>

【问题讨论】：

标签： html video tags sequence playing

【解决方案1】：

浏览器应该使用您的 JavaScript 代码触发错误“未定义视频元素”，您必须从 DOM 获取视频元素，而不是直接使用其 id。请将您的代码更改为

$(document).ready(function() {
    //place code inside jQuery ready event handler 
    //to ensure videoElement is available
    var i = 0;
    var sources = ['1.mp4', '2.mp4'];
    $('#videoElement').bind('ended', function() {
        //'this' is the DOM video element
        this.src = sources[i++ % sources.length];
        this.load();
        this.play();
    });
});

【讨论】：

谢谢，这非常有帮助，它有效...除了最后两个视频现在无休止地播放。是什么原因造成的？最后一个视频播放完后如何停止？快把我逼疯了。
我知道这个问题很老了，你在很久以前就问过这个问题，但这是由于该行 sources[i++ % sources.length] 上的模运算符。随着 i 的增加，它确保它不会超过 source.length。当它这样做时，它会循环回来。当 i = 2 时，2 % 2 = 0。这意味着它将不断重复索引 0 和索引 1 的源。

【解决方案2】：

如果有人再次遇到这个问题，这是我对类似问题的解决方案——我需要播放第一个视频一次，然后循环播放第二个视频。我也支持.webm、.m4v 和.mp4。

这是我的 JS：

    $(document).ready(function(){
        var vid = document.getElementById("landing-video");
        vid.onplay = function() {
            var source=vid.currentSrc;
            folder = source.match(/(.+)(\/)/);
            ext = source.match(/(\.\w+)$/);
        };

        vid.onended = function() {
          $("#landing-video").attr({
            "src":folder[0]+"video-2"+ext[0],
            "loop":""
          });
        };
    });

这是我的 HTML：

    <video autoplay="" muted="" poster="" id="landing-video">
      <source src="my-folder/video-1.webm" type="video/webm">
      <source src="my-folder/video-1.m4v" type="video/x-m4v">
      <source src="my-folder/video-1.mp4" type="video/mp4">
    </video>

这可能会节省一些时间。

【讨论】：