У меня есть html-видео, и я хочу запустить функцию, когда видео заканчивается. Я пробовал следующее, но ничего не получаю:
$(document).ready(function(){
$('video').live('ended',function(){
alert('video ended');
});
});
Любые идеи, почему это не запускается в конце видео? Или я не предоставил достаточно информации, чтобы ответить на что-нибудь здесь?
Примечание. Я использую функцию live(), а не on() из-за необходимости jQuery 1.7 с этим проектом.
Для вашего удовольствия вставьте и скопируйте решение jQuery:
<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
$(document).ready(function(){
$('video').on('ended',function(){
console.log('Video has ended!');
});
});
/*]]>*/</script><html>
<head>
<title></title>
<script>
function videoEnded() {
alert('video ended');
}
</script>
</head>
<body>
<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
video not supported
</video>
</body>
</html>
использовать onended событие
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
alert('video ended');
}
Подробнее о Все, что вам нужно знать о видео и аудио HTML5
Вот что вы можете попробовать:
$(document).on('ended', 'video', function (e) {
alert('video ended');
});
Вы сказали, что видео динамически вставлено после DOM загружается. В этом script вы выполняете поиск в DOM для элемента video и привязываете его к функции ended.
Вот документация для . on().
Вот вопрос SO для динамических элементов.
Надеюсь, это поможет!
Единственный способ, которым я смог работать, - это следующий код:
$('video')[0].on('ended',function(){
console.log('Video has ended!');
});
Вы можете использовать на месте живого. Потому что по методу поддерживается jquery новые версии и live устарел в новых версиях.
Вы можете заменить свой код на это, и ваша проблема будет решена.
$(document).ready(function(){
$('video').on('ended',function(){
alert('video ended');
});
});