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

190

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

2010-04-29 UltimateBrent

Очень полезная документация с тестовой страницы от Apple: http://developer.apple. com/library/safari/# samplecode/HTML5VideoEventFlow/Listings/events_js.html # // apple_ref/doc/uid/DTS40010085-events_js-DontLinkElementID_5 Все, что вы хотели знать о видео-событиях HTML5! – viebel

219

Вы можете добавить слушатель события с 'бессрочным' первыми парами

Как это:

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

источник

2010-05-21 09:32:15 Darkroro

Это единственное видео. Событие «на конце», которое работает во всем Интернете. Браво! – Isaac

+10

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

Работает на Android Chrome в отличие от 'onended' – Richard

125

Посмотрите на это Everything You Need to Know About HTML5 Video and Audio сообщение на сайте 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 media element (video/audio) events.

источник

2010-04-30 00:01:27

Является ли этот браузер конкретным? – UltimateBrent

Я обновляю свой ответ с дополнительной информацией. –

Спасибо! Это должно сделать это! – UltimateBrent

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 and Video DOM Reference

источник

2013-01-13 06:52:19 d1jhoni1b

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

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

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

источник

2014-03-14 08:28:00

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

<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» слово «закончилась» с «паузой» или «играть», чтобы захватить эти события, а также.

источник

2014-06-19 20:31:01 user3758025

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

Вы можете добавить слушателю все видео события nicluding 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>

источник

2016-12-08 19:24:54 jafarbtech

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

ответ

Смежные вопросы