HTML5 видео/конец видеоролика

Ответ 1

Короче: вам нужно добавить video.addEventListener('ended',function() {}) и сделать это в своем пользовательском JavaScript.

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

Ссылки для поиска подробной информации:

• Все, что вам нужно знать о видео и аудио HTML5
• События мультимедиа, с которыми вы можете привязать
• Видеоконференции HTML5 и API
• MSDN - Использование видеоконференций HTML5

Ответ 2

Простой способ сделать это:

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

Действительно, при изменении src тега видео вы неявно вызываете load() на нем.

Этот метод имеет оговорку, чтобы снова запросить URL-адрес носителя и в зависимости от настроек кеширования он может повторно загрузить полноразмерный медиа-ресурс, вызывая ненужное использование сети/ЦП для клиента.

Более подходящим способом решения этой проблемы является использование оверлейного изображения /div поверх видеотега и скрыть его при запуске видео. Когда закончится событие с завершенным событием, просто снова отобразите наложенное изображение.

Ответ 3

Вот что я сделал, чтобы увидеть плакат после того, как видео закончилось:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

Ответ 4

попробуйте это

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});  

Ответ 5

Наконец, я получил решение: видео будет воспроизводиться автоматически, а в конце видео вы увидите изображение плаката:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
 document.observe('dom:loaded', function(evt){
    $('#myVideo').each(function(elm){
        elm.play();
        var wrapper = elm.wrap('span');
        var vid = elm.clone(true);
        elm.observe('ended', function(){
          wrapper.update(vid);
       });
    });
 });
</script>

<video id="myVideo" poster="1.png" >
    <source src="1.mp4" type="video/mp4" />
</video>

Ответ 6

Это работает для меня.

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
}); 

Ответ 7

У меня была такая же цель, и я нашел решение, используя jQuery для reset источника видео для себя при завершении. Теперь я получаю свой анимированный плакат gif до и после игры. Вот простая функция воспроизведения javascript и код jQuery.

function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }  

Ответ 8

решил добавить 1 дополнительный фрейм (постер) в конец самого видео, потому что веб-сайт не поддерживал вставку javascripts

Ответ 9

Если вам нужен плакат в конце, и это единственное требование, я бы сказал, просто добавьте конечный кадр в видеофайл в качестве этого плаката и пропустите загрузку ненужного JS. Когда видео закончится, вы увидите последний кадр, который теперь является добавленным вами постером.

Если вы хотите отобразить видеопостер в конце или другими словами перезагрузить видео, используйте пользовательское событие, как показано выше Е.Л. Юсубовым