HTML5 <видео> обратные вызовы?

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

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

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

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

Источник

3 ответа

Решение

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

Например:

$("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);
});
Источник

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

HTML 5 Video OnEnded Событие не запускается

и увидеть также

Определить, когда видео HTML5 заканчивается

Для решения общего назначения (см. Видео тег с отступлением см.)

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

Источник

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

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>
Источник
Другие вопросы по тегам