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

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

Вы можете сделать

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

В качестве продолжения ответа одного дня, вы также можете использовать

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

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

Answer 7

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

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

Надеюсь, это поможет.

Answer 8

Я использую FancyBox и jQuery для встраивания видео. Дайте ему удостоверение личности.

Возможно, не ЛУЧШЕЕ решение могло бы по-другому переключать воспроизведение / паузу - но легко для меня, и ЭТО РАБОТАЕТ! :)

В

`

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

Answer 9

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

при нажатии кнопки JQuery

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

Спасибо

Answer 10

По 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 с использованием идентификатора

video_ID.play();  video_ID.pause();

OR

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();