Определить, когда видео HTML5 заканчивается

252

Как определить, когда <video>элемент HTML5 закончил играть?

html html5-video

Очень полезная документация с тестовой страницей от Apple: developer.apple.com/library/safari/#samplecode/… Все, что вы хотели знать о видео-событиях HTML5!

— '15

311

Вы можете добавить прослушиватель событий с «окончен» в качестве первого параметра

Как это :

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

— Lothereus
источник

8

Это единственное видео "в конце", которое работает во всем Интернете. Браво!

— Исаак

10

Почему вы проверяете, существует ли e?

— Аллан Степпс

3

@AllanStepps Из того, что я могу извлечь, if(!e) { e = window.event; }утверждение, что этот ответ изначально включал, является специфичным для IE кодом для получения последнего события из обработчика событий, прикрепленного attachEventк более ранним версиям IE. Поскольку в этом случае к нему подключается обработчик addEventListener(а ранние версии IE не имеют отношения к людям, имеющим дело с HTML5-видео), он был совершенно ненужным, и я удалил его.

— Марк Амери

3

Следует отметить один момент, когда при использовании этого метода Safari на El Capitan версии OS X (10.11) не перехватывает событие «завершено». Поэтому в этом случае мне нужно было использовать событие timeupdate, а затем проверить, когда this.current Time снова становится равным 0.

— Cam

2

Также не забудьте установить цикл в false, иначе завершенное событие не будет запущено.

— Израиль Моралес

134

Взгляните на это все, что вам нужно знать о видео и аудио посте HTML5 на сайте Opera Dev в разделе «Я хочу развернуть свои собственные элементы управления».

Это соответствующий раздел:

<video src="video.ogv">
     video not supported
</video>

тогда вы можете использовать:

<script>
    var video = document.getElementsByTagName('video')[0];

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

onendedявляется стандартным событием HTML5 для всех элементов мультимедиа, см. документацию по событиям элемента мультимедиа HTML5 (видео / аудио) .

— Аластер Питтс
источник

2

Я пытался поймать «законченное» событие точно так же, как вы представили, но это событие не запускается. Я нахожусь под Safari 5.0.4 (6533.20.27)

— AntonAL

@AntonAL: я бы опубликовал это как новый вопрос, если у вас возникли проблемы.

— Аластер Питтс

@All: Вы можете сделать это так же. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">

— VendettaDroid

5

@AlastairPitts Это не действует в Chrome. Ответ Darkroro - единственный способ заставить его работать с Chrome. Это все еще работало на Firefox.

— Джефф

Мертвые ссылки. w3schools.com/tags/ref_eventattributes.asp => Мероприятия для СМИ

— Aurelien

36

Jquery

$("#video1").bind("ended", function() {
   //TO DO: Your code goes here...
});

HTML

<video id="video1" width="420">
  <source src="path/filename.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Типы событий HTML Audio и Video DOM Reference

— d1jhoni1b
источник

11

-1. .on()был предпочтительным по сравнению .bind()с jQuery 1.7, который был выпущен в 2011 году. Также, пожалуйста, отформатируйте ваш код правильно.

— Марк Амери

4

Вот полный пример, надеюсь, это поможет =).

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" controls="controls">
  <source src="your_video_file.mp4" type="video/mp4">
  <source src="your_video_file.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }
        alert("Video Finished");
    }
</script>
</body> 
</html>

— Oscar_Wroclaski
источник

4

Вот простой подход, который срабатывает, когда видео заканчивается.

<html>
<body>

    <video id="myVideo" controls="controls">
        <source src="video.mp4" type="video/mp4">
        etc ...
    </video>

</body>
<script type='text/javascript'>

    document.getElementById('myVideo').addEventListener('ended', function(e) {

        alert('The End');

    })

</script>
</html>

В строке «EventListener» замените слово «закончилась» на «пауза» или «воспроизведение», чтобы также захватить эти события.

— user3758025
источник

У вас есть синтаксическая ошибка в этом коде JS. Отсутствует) после списка аргументов

— frzsombor

1

Вы можете просто добавить onended="myFunction()"в свой тег видео.

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>

— JC R
источник

0

Вы можете добавить слушателя все видео события, кроме того, ended, loadedmetadata, timeupdateгде endedфункция вызывается, когда видео заканчивается

$("#myVideo").on("ended", function() {
   //TO DO: Your code goes here...
      alert("Video Finished");
});

$("#myVideo").on("loadedmetadata", function() {
      alert("Video loaded");
  this.currentTime = 50;//50 seconds
   //TO DO: Your code goes here...
});


$("#myVideo").on("timeupdate", function() {
  var cTime=this.currentTime;
  if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
      alert("Video played "+cTime+" minutes");
   //TO DO: Your code goes here...
  var perc=cTime * 100 / this.duration;
  if(perc % 10 == 0)//Alerts when every 10% watched
      alert("Video played "+ perc +"%");
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <video id="myVideo" controls="controls">
    <source src="your_video_file.mp4" type="video/mp4">
      <source src="your_video_file.mp4" type="video/ogg">
        Your browser does not support HTML5 video.
  </video>

</body>

</html>

Развернуть фрагмент

— jafarbtech
источник