Видео HTML5 / Конец видеопостера

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

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

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

• Все, что вам нужно узнать о видео и аудио HTML5
• Медиасобытия, к которым можно привязать< /а>
• Видеособытия HTML5 и API
• MSDN — Использование видеособытий HTML5

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

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

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

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

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

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

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

попробуй это

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

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

<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>

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

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

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

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

Я вижу два пути решения вашей проблемы.

Первый установит текущий кадр в позицию 0 (самый первый кадр) после окончания видео. Вы можете установить любую рамку, которая вам нравится. Это решение рекомендуется.

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.currentTime = 0;
};
</script>

Следующий перезагрузит источник видео, поэтому постер снова появится. Согласно спецификации poster в video оно будет отображаться только до тех пор, пока видео не запустится один раз. После этого единственный способ снова получить постер - перезалить видео src и poster, просто для уверенности. Будет работать немного стабильнее с poster перезагрузкой.

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.poster = "test.jpg"
  myVideo.src = "test.mp4"
};
</script> 

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

function play()
    {
    movie_ID.play(); 

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

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