Воспроизведение / пауза HTML 5 видео с помощью JQuery
Я пытаюсь управлять видео HTML5 с помощью JQuery. У меня есть два клипа в интерфейсе с вкладками, всего шесть вкладок, у других просто есть изображения. Я пытаюсь заставить видеоклипы воспроизводиться при нажатии на их вкладку, а затем останавливаться при нажатии на любую из других.
Это должно быть просто, но я не могу заставить его работать, код, который я использую для воспроизведения видео:
$('#playMovie1').click(function(){
$('#movie1').play();
});
Я прочитал, что элемент видео должен быть представлен в функция, чтобы иметь возможность контролировать его, но не могу найти пример. Я могу заставить его работать с помощью JS:
document.getElementById('movie1').play();
любой совет был бы отличным. Спасибо
15 ответов
ваше решение показывает проблему здесь...play
является не функцией jQuery, а функцией элемента DOM. Поэтому вам нужно вызвать его на элемент DOM. Вы приводите пример того, как это сделать с собственными функциями DOM. Эквивалент jQuery - если вы хотите сделать это, чтобы соответствовать существующему выбору jQuery-будет $('#videoId').get(0).play()
. (get
получает собственный элемент DOM из выбора jQuery.)
Это, как мне удалось заставить его работать:
jQuery( document ).ready(function($) {
$('.myHTMLvideo').click(function() {
this.paused ? this.play() : this.pause();
});
});
все мои теги HTML5 имеют класс "myHTMLvideo"
почему вам нужно использовать jQuery? Ваше предлагаемое решение работает, и это, вероятно, быстрее, чем построение объекта jQuery.
document.getElementById('videoId').play();
для приостановки нескольких видео я обнаружил, что это работает:
$("video").each(function(){
$(this).get(0).pause();
});
Это можно поместить в функцию щелчка, которая довольно удобна.
в качестве расширения ответа lonesomeday вы также можете использовать
$('#playMovie1').click(function(){
$('#movie1')[0].play();
});
обратите внимание, что функция get() или eq() jQuery не вызывается. Массив DOM используется для вызова функции play (). Это короткий путь, чтобы иметь в виду.
Мне нравится этот:
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
надеюсь, что это помогает.
Я использую FancyBox и jQuery для встраивания видео. Дать ему ID.
возможно, не лучшее решение может переключать воспроизведение / паузу по-разному - но легко для меня, и это работает! :)
на
`
<input type="hidden" id="current_video_playing">
<input type="hidden" id="current_video_status" value="playing">
<video id="video-1523" autobuffer="false" src="movie.mp4"></video>
<script>
// Play Pause with spacebar
$(document).keypress(function(e) {
theVideo = document.getElementById('current_video_playing').value
if (e.which == 32) {
if (document.getElementById('current_video_status').value == 'playing') {
document.getElementById(theVideo).pause();
document.getElementById('current_video_status').value = 'paused'
} else {
document.getElementById('current_video_status').value = 'playing'
document.getElementById(theVideo).play();
}
}
});
</script>`
так же, как Примечание, убедитесь, что вы проверяете, поддерживает ли браузер функцию видео, прежде чем пытаться вызвать его:
if($('#movie1')[0].play)
$('#movie1')[0].play();
это предотвратит ошибки JavaScript в браузерах, которые не поддерживают тег video.
Я также сделал это так:
$(window).scroll(function() {
if($(window).scrollTop() > 0)
document.querySelector('#video').pause();
else
document.querySelector('#video').play();
});
@loneSomeday объяснил это красиво, здесь одно решение, которое также может дать вам хорошее представление о том, как достичь функциональности воспроизведения/паузы
по JQuery с помощью селекторов
$("video_selector").trigger('play');
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');
С помощью Javascript с помощью ID
video_ID.play(); video_ID.pause();
или
document.getElementById('video_ID').play(); document.getElementById('video_ID').pause();
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script>
$(document).ready(function(){
document.getElementById('vid').play(); });
</script>
это простые методы, которые мы можем использовать
на кнопке jquery нажмите function
$("#button").click(function(event){
$('video').trigger('play');
$('video').trigger('pause');
}
спасибо