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


206

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

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

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

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

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

Будем признательны любому совету. Спасибо

Ответы:


357

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


5
Это здорово, работает отлично, действительно спасибо. Хорошо, чтобы лучше понять DOM.
Barny83

1
Использование JQuery для управления видео таким образом вызывает проблемы с воспроизведением на iPhone. У меня есть элемент видео во вкладке, jquery показывает это, но затем нажатие на стрелку запуска видео не запускает клип. Когда я удаляю строку $ ('# videoId'). Get (0) .play (), проблем не возникает. Как лучше всего обойти это? Я думал, что смогу удалить js с условным утверждением для iOS - видео не будет автоматически запускаться для устройств iOS в любом случае, поэтому я был бы рад сделать это - или есть более простое решение? Любая помощь высоко ценится.
Barny83

Как я могу заставить это приостановить все элементы <video> на странице?
prismpecs

5
@russellsayshi - нет, это будет играть только ОДИН видео; prismspecs попросил ВСЕ видео. Правильный синтаксис: $('video').each(this.play());играть все; $('video').each(this.pause());приостановить все. each()является функцией jQuery, в нее передается функция javascript, которая применяется к каждому элементу. Поскольку каждый элемент обрабатывается, thisпредставляет этот элемент.
ToolmakerSteve

11
Если хотите только первый элемент, можете упростить, заменив .get(0)на [0]. Так $('video')[0].play();или для конкретного идентификатора $('#videoId')[0].play();.
ToolmakerSteve


56

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

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

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


7
Обратите внимание, что нет необходимости переносить jQuery, так что вы можете сохранить эти накладные расходы, заменив троичную строку следующим образом:this.paused ? this.play() : this.pause();
Пит Уоттс

21

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

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

Проверьте решение loneomeday, если вы настаиваете на реализации jQuery (также для объяснения того, почему вы не можете просто вызвать playобъект jQuery).
sudo работа

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

2
Если вы уже создали экземпляр объекта jQuery для movie1сквозного выполнения $('movie1')других действий jQuery, то это нормально; однако, если вы делаете это только в этом одном месте, вы обнаружите некоторую потерю производительности. Это может быть недостаточно заметно, но я люблю много оптимизировать.
sudo работа

@Sudowork - серьезно? вы обсуждаете снижение производительности при запуске воспроизведения видео? Если ваше устройство достаточно быстрое для воспроизведения видео, оно достаточно быстрое, чтобы выполнять множество действий jQuery, не обращая на это внимания пользователя.
ToolmakerSteve

19

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

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

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


4
Вы можете сделать то же самое так: $ ("video"). Each (function () {this.pause ()});
Марсель М.

1
$ (this) -> вы создаете объект jquery из объекта "this". получить (0) -> вы получите обратно оригинальный "этот" объект из объекта JQuery ... это === $ (это) .get (0)
Blackfire

14

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

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

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


12

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

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

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


4

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

3

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

на JQuery функцию нажатия кнопки

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

Спасибо


1

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

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

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


1

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

ИЛИ

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

0

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


2
«Я пытаюсь воспроизвести видеоклипы при нажатии на их вкладку», поэтому необходима управляемая событием обработка.
Давиденке

0

Я также заставил это работать так:

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


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
    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

Привет, добро пожаловать в Stack Overflow. При ответе на вопрос, на который уже есть много ответов, обязательно добавьте дополнительное понимание того, почему ответ, который вы предоставляете, является существенным, а не просто повторяет то, что уже проверено оригинальным постером. Это особенно важно в ответах «только для кода», таких как ответ, который вы предоставили.
БКИ

-1

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 
<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 


Решение в вашем ответе, похоже, не работает
Cray
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.