Виявити, коли закінчується відео HTML5

252

Як визначити, коли <video>елемент HTML5 закінчився відтворення?

html html5-video

— Brent
джерело

Дуже корисна документація із тестовою сторінкою від Apple: developer.apple.com/library/safari/#samplecode/… Все, що ви хотіли знати про відео події HTML5!

— viebel

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>

— Лотерей
джерело

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', а потім перевірити, коли цей час поточного часу знову дорівнював 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" висота = "100%" onended = "myHandler ()">

— VendettaDroid

5

@AlastairPitts Це неправда в Chrome. Відповідь Darkroro - це єдиний спосіб, коли я змусив його працювати з Chrome. Це все ще працювало на Firefox.

— Джефф

Мертві посилання. w3schools.com/tags/ref_eventattributes.asp => Медіа події

— Aurelien

36

ПІДКЛЮЧЕННЯ

$("#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 для аудіо та відео

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

— Оскар_Вроцласкі
джерело

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
джерело