在第一个视频结束后更改视频源答案

【问题标题】：Change video source after the first video ends在第一个视频结束后更改视频源
【发布时间】：2016-09-28 10:56:54
【问题描述】：

我的设计中有两个视频文件。第一个是标志显示动画，第二个是标志动画。我只想在每次加载页面时才加载第一个视频。我想在第一个视频结束后加载第二个视频。

我的目标是：页面加载时播放第一个视频（仅一次 - 每次页面加载）。如果第一个视频结束，第二个视频将循环播放。我不想一次又一次地显示徽标显示（第一次）。这个怎么做。希望我能得到解决方案。

这是我的代码。

HTML：

<video width="400" controls id="myVideo" autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

  document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        alert();
        var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
       $(' #myVideo source').attr('src', videoFile);
       $("#myVideo")[0].load();
    }

演示：https://jsfiddle.net/jLa1s62w/

【问题讨论】：

你的小提琴是空的？
请修复您的 jsfiddle 链接。
对不起。忘了保存:) .. 现在完成了:)

标签： javascript jquery html html5-video

【解决方案1】：

你几乎明白了。

document.getElementById('myVideo').addEventListener('ended', myHandler, false);

function myHandler(e) {
    alert();
    var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
    $(' #myVideo source').attr('src', videoFile);
    $('#myVideo').attr("loop", true); /* 1 */
    $("#myVideo")[0].load();
    document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */
}

1) Loop 属性，因此第二个视频循环播放。

2) 移除事件监听器，这样视频就不会再次被替换。

https://jsfiddle.net/yuriy636/jLa1s62w/1/

注意：如果你使用的是 jQuery，你也可以使用 jQuery 的事件方法： $('#myVideo').on('ended',myHandler) 和 $('#myVideo').off('ended',myHandler)

【讨论】：