Как получить доступ к HTML5 видео методам с помощью jQuery?

Question

Я пишу приложение HTML5 и пытаюсь получить доступ к родным методам видео (воспроизведение, пауза и т. Д.) И использовать jQuery. Я не хочу использовать другие плагины.

var movie = $('#video_with_controls');

$('#buttonX').click(function() {
            movie.play();
      });

Но когда я выполняю предыдущий код, я получаю следующее сообщение об ошибке консоли:

Object has no method 'play'

Как мне это исправить? Спасибо.

Answer 1

HTML5 элемент DOM video имеет метод .play () . В jQuery пока нет метода воспроизведения . То, что вы делаете неправильно, это запуск воспроизведения из селектора jQuery, который возвращает массив элементов.

Например, $('#clip') возвращает [<video width=​"390" id=​"clip" controls>​…​</video>​], который на самом деле является массивом одного элемента DOM. Чтобы получить доступ к фактическому элементу DOM, вам нужно обратиться к одному из элементов массива, выполнив что-то вроде $('#clip')[0]. Теперь вы можете сказать этому элементу DOM PLAY.

Так что просто сделайте это:

var movie = $('#video_with_controls');

$('#buttonX').click(function() {
            movie[0].play();  //Select a DOM ELEMENT!
      });

Это мой пример:

HTML:

 <video width="390" id="clip" controls="">
                    <source src="http://slides.html5rocks.com/src/chrome_japan.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">                
                  </video>
        <input type="button" id="play" value="PLAY" />

JQuery

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

Это работает: http://jsbin.com/erekal/3