HTML5 <видео> обратные вызовы?
Я работаю над сайтом для клиента, и они настойчивы при использовании видео тега HTML5 как способ доставки для части их видеоконтента. У меня в настоящее время есть он и работающий с небольшой справкой из http://videojs.com/ для обработки нейтрализации Flash Internet Explorer.
Одна вещь, которую они попросили, чтобы я сделал, после того, как видео заканчивают играть (они - весь другая длина), постепенно исчезните их и затем исчезните, изображение вместо видео---думает о ней как кадр плаката после видео.
Это даже возможно? Можно ли получить временной код в настоящее время проигрывающего фильма с помощью JavaScript или некоторого другого метода? Я знаю, что Flowplayer (http://flowplayer.org/demos/scripting/grow.html) имеет функцию onFinish, которая является маршрутом, которым я должен следовать вместо видео метода HTML5? То, что пользователи IE будут добираться, Flash player требуют двух разных решений?
Любой вход значительно ценился бы. Я в настоящее время использую jQuery на сайте, таким образом, я хотел бы сохранить решение в той области если вообще возможным.Спасибо!
2 ответа
Вы можете просмотреть полный список событий в спецификации здесь .
Например:
$("video").bind("ended", function() {
alert("I'm done!");
});
Вы можете привязаться к событию в элементе, как и все остальное в jQuery ... что касается вашего вопроса с комментарием, какой бы элемент вы ни доставляли для IE, да, для этого потребуется отдельный обработчик. вплоть до любого мероприятия, которое он предоставляет.
Что касается другого вопроса о временном коде, событие timeupdate происходит во время воспроизведения, а событие durationchange происходит при изменении общей продолжительности. Вы можете привязать их и использовать так же, как я показал выше с событием end . С timeupdate вам, вероятно, понадобится свойство currentTime , с durationchange вам понадобится свойство duration , каждое из которых вы получите непосредственно от объекта DOM, например:
$("video").bind("durationchange", function() {
alert("Current duration is: " + this.duration);
});
Существует событие OnEnded, связанное с тегом video. Однако оно не работает в текущей версии Google Chrome.
HTML 5 Video OnEnded Event not Firing
и см. также
Detect when an HTML5 video finishes
Для решения общего назначения (поддерживает тег video с fallback см.)
http://camendesign.com/code/video_for_everybody или http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library или http://www.mediafront.org/