Обратные вызовы HTML5 <video>?

Я работаю над сайтом для клиента, и они настаивают на использовании тегов HTML5 в качестве способа доставки для некоторых своих видеоконтента. В настоящее время я запускаю его с небольшой помощью http://videojs.com/ для обработки резервной копии Flash-браузера Internet Explorer.

Одна вещь, которую они просили меня сделать, - после того, как видео закончит играть (они все разные длины), выцветают, а затем исчезают изображение вместо видео --- думайте об этом как о плакат после видео.

Возможно ли это? Можете ли вы получить временный код воспроизводимого в данный момент фильма через Javascript или какой-либо другой метод? Я знаю, что Flowplayer (http://flowplayer.org/demos/scripting/grow.html) имеет функцию onFinish, является ли маршрут, который я должен использовать вместо видео-метода HTML5? Может ли тот факт, что пользователи IE будут получать Flash-плеер, потребует двух отдельных решений?

Приветствуется любой ввод. В настоящее время я использую jQuery на сайте, поэтому я хотел бы сохранить решение в этой области, если это вообще возможно. Спасибо!

Ответ 1

Вы можете просмотреть полный список событий в спецификации здесь.

Например:

$("video").bind("ended", function() {
   alert("I'm done!");
});

Вы можете привязать событие к элементу, как что-либо еще в jQuery... как к вашему комментарию, независимо от того, какой элемент вы доставляете для IE, да, для этого потребуется отдельный обработчик, привязанный к любому событию, которое он предоставляет.

Для другого вопроса о временном коде событие timeupdate возникает при его воспроизведении, а событие durationchange происходит при изменении общей продолжительности. Вы можете привязываться к ним и использовать их так же, как я показал с событием ended выше. С timeupdate вам, вероятно, понадобится свойство currentTime, с durationchange вам понадобится свойство duration, каждое из которого вы получите непосредственно из объекта DOM, например:

$("video").bind("durationchange", function() {
   alert("Current duration is: " + this.duration);
});

Ответ 2

Существует событие OnEnded, связанное с тегом видео. Однако он не работает для меня в текущей версии Google Chrome.

HTML 5 Видео OnEnded Event не запускается

и см. также

Обнаружить, когда закончится видео HTML5

Для универсального решения (поддерживает видеотег с резервным см.)

http://camendesign.com/code/video_for_everybody или http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library или http://www.mediafront.org/

Ответ 3

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

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>