HTML5 видео: узнайте новый источник

Question

Я пытаюсь создать видеоплеер HTML5, который будет автоматически воспроизводить новое видео после его окончания.

Вот мой текущий код (http://jsfiddle.net/fFuez/1/):

<video autobuffer controls width="500" id="player">
   <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4" id="source">
</video>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(document).ready( function () { 

      $("#player").bind("ended", function() {
        alert("Finshed, play new video now...");
        $('#source').attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4'); 
      });

    });  
</script>

Завершенное событие запускается (в соответствии с alert();), но новый файл, похоже, не распознается проигрывателем.

Answer 1

Удалите элемент <source> и добавьте атрибут src непосредственно в тег <video>. Вам нужно только <source> элементов, когда существует более одного источника. Затем измените src из <video>, и оно должно работать нормально.

Если вам нужно поддерживать больше типов файлов (например, видео OGG для Firefox), вам следует использовать метод canPlayType(), чтобы определить, какое расширение src необходимо.

Answer 2

Вам нужно использовать #player, а не #source