190
Как вы обнаруживаете, когда элемент HTML5 <video> закончил игру?Определите, когда закончится видео в формате HTML5
A
ответ
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>
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.
+1
Является ли этот браузер конкретным? – UltimateBrent
+0
Я обновляю свой ответ с дополнительной информацией. –
+0
Спасибо! Это должно сделать это! – UltimateBrent
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 Audio and Video DOM Reference
+8
-1. '.on()' был предпочтительнее '.bind()' с jQuery 1.7, который был выпущен в 2011 году. Также, пожалуйста, отформатируйте свой код правильно. –
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>
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-коде. Отсутствует) после списка аргументов – frzsombor
0
Вы можете добавить слушателю все видео события 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>
Очень полезная документация с тестовой страницы от Apple: http://developer.apple. com/library/safari/# samplecode/HTML5VideoEventFlow/Listings/events_js.html # // apple_ref/doc/uid/DTS40010085-events_js-DontLinkElementID_5 Все, что вы хотели знать о видео-событиях HTML5! – viebel