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

194

Как вы обнаруживаете, когда элемент HTML5 <video> закончил игру?

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

6 ответов

200
Лучший ответ

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

Вот так:

<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>
Поделиться
  • 7
    Это единственное видео "в конце", которое работает во всем Интернете. Браво!
  • 10
    Почему вы проверяете, существует ли e?
Показать ещё 6 комментариев
118

Посмотрите на это Все, что вам нужно знать о видео и аудио 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 (видео/аудио).

Поделиться
  • 1
    Это конкретный браузер?
  • 0
    Я обновил свой ответ с дополнительной информацией.
Показать ещё 7 комментариев
33

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-ссылка на аудио и видео DOM

Поделиться
  • 9
    -1. .on() предпочтительнее .bind() со времен jQuery 1.7, выпущенного в 2011 году. Также, пожалуйста, отформатируйте ваш код правильно.
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" замените слово "закончено" на "пауза" или "воспроизведение", чтобы захватить эти события.

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

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

<!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>
Поделиться
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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню