HTML5 <video>обратные вызовы? - PullRequest
Новая
       9

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

32 голосов
/ 02 июня 2010

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

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

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

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

Ответы [ 3 ]

66 голосов
/ 02 июня 2010

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

Например: 

$("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);
});
3 голосов
/ 02 июня 2010

С тегом видео связано событие 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/

1 голос
/ 10 апреля 2015

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

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