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

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

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

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

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

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

Любые советы были бы замечательными. Благодаря

Ответы

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

С помощью 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();

Ответ 14

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