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

Question

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

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

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

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

Answer 1

You can view a complete list of events in the spec here.

Например:

$("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); 
}); 

Answer 2

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

HTML 5 Video OnEnded Event not Firing

и смотри также

Detect when an HTML5 video finishes

Для решения общего назначения (поддерживает видео тег с резервной см)

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

Answer 3

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

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