Блог

Главная - Вопросы по программированию - Последовательное воспроизведение двух видеороликов в Chrome с помощью тега

Последовательное воспроизведение двух видеороликов в Chrome с помощью тега

#html #video #tags #sequence #playing

#HTML #Видео #Теги #последовательность #воспроизведение

Вопрос:

Как воспроизвести два видеоролика последовательно в теге HTML5 video?

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

Ответ №1:

Браузер должен выдать сообщение об ошибке «Элемент videoElement не определен» с помощью вашего кода JavaScript вы должны получить элемент video из DOM, а не использовать его идентификатор напрямую. Пожалуйста, измените свой код на

 $(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();
    });
});

Комментарии:

1. Спасибо, это было очень полезно, это сработало … за исключением того, что последние два видео теперь воспроизводятся бесконечно. Что является причиной этого? Как остановиться после завершения воспроизведения последнего видео? Это сводит меня с ума.

2. Я знаю, что этот вопрос устарел, и вы задавали его давным-давно, но это связано с оператором modulo в этой строке sources[i % sources . длина]. При увеличении i он гарантирует, что он не проходит мимо источников. длина. Когда это происходит, он возвращается назад. Когда 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>

Это может сэкономить кому-то время.