Измените источник видео после завершения первого видео.

Question

У меня есть два видеофайла в моем дизайне. Первая - это анимация с логотипом, а вторая - анимация логотипа. Я хочу загрузить первое видео только при загрузке страницы каждый раз. И я хочу загрузить второе видео после завершения первого видео.

Здесь моя цель: 1-е видео воспроизводится, когда страница загружается (только один раз - каждая загрузка страницы). Если первое видео заканчивается, второе видео будет воспроизводиться в цикле. Я не хочу снова и снова показывать логотип (1-й). Как это сделать. Надеюсь, я получу решение.

Вот код, который у меня есть.

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> 

JS

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/

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