Воспроизведение / пауза HTML 5 видео с помощью JQuery

Я пытаюсь управлять видео HTML5 с помощью JQuery. У меня есть два клипа в интерфейсе с вкладками, всего шесть вкладок, у других просто есть изображения. Я пытаюсь заставить видеоклипы воспроизводиться при нажатии на их вкладку, а затем останавливаться при нажатии на любую из других.

Это должно быть просто, но я не могу заставить его работать, код, который я использую для воспроизведения видео:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

Я прочитал, что элемент видео должен быть представлен в функция, чтобы иметь возможность контролировать его, но не могу найти пример. Я могу заставить его работать с помощью JS:

document.getElementById('movie1').play();

любой совет был бы отличным. Спасибо

172
css html html5 html5-video jquery

15 ответов

ваше решение показывает проблему здесь...play является не функцией jQuery, а функцией элемента DOM. Поэтому вам нужно вызвать его на элемент DOM. Вы приводите пример того, как это сделать с собственными функциями DOM. Эквивалент jQuery - если вы хотите сделать это, чтобы соответствовать существующему выбору jQuery-будет $('#videoId').get(0).play(). (get получает собственный элемент DOM из выбора jQuery.)

292

Это, как мне удалось заставить его работать:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

все мои теги HTML5 имеют класс "myHTMLvideo"

47

можно сделать

$('video').trigger('play');
$('video').trigger('pause');
36

почему вам нужно использовать jQuery? Ваше предлагаемое решение работает, и это, вероятно, быстрее, чем построение объекта jQuery.

document.getElementById('videoId').play();
20

для приостановки нескольких видео я обнаружил, что это работает:

$("video").each(function(){
    $(this).get(0).pause();
});

Это можно поместить в функцию щелчка, которая довольно удобна.

19

в качестве расширения ответа lonesomeday вы также можете использовать

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

обратите внимание, что функция get() или eq() jQuery не вызывается. Массив DOM используется для вызова функции play (). Это короткий путь, чтобы иметь в виду.

13

Мне нравится этот:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

надеюсь, что это помогает.

10

Я использую 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>`
4

так же, как Примечание, убедитесь, что вы проверяете, поддерживает ли браузер функцию видео, прежде чем пытаться вызвать его:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

это предотвратит ошибки JavaScript в браузерах, которые не поддерживают тег video.

1

использовать это.. $('#video1').attr({'autoplay':'true'});

0

Я также сделал это так:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});
0

@loneSomeday объяснил это красиво, здесь одно решение, которое также может дать вам хорошее представление о том, как достичь функциональности воспроизведения/паузы

воспроизведение/пауза видео на кнопку

0

по 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();
0
<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>
0

это простые методы, которые мы можем использовать

на кнопке jquery нажмите function

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

спасибо

0