¿Cómo acceder a los métodos de video HTML5 con jQuery?

Question

Estoy escribiendo una aplicación HTML5 e intento acceder a los métodos de video nativos (reproducir, pausar, etc ...) y usar jQuery. No quiero usar ningún otro complemento.

var movie = $('#video_with_controls'); 

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

Pero cuando ejecuto el código anterior, me sale el siguiente mensaje de error de la consola:

Object has no method 'play' 

¿cómo puedo solucionar esto? Gracias.

Answer 1

video HTML5 El elemento DOM tiene el método .play(). No hay un método de juego en jQuery yet. Lo que está haciendo mal es disparar play desde un selector jQuery que devuelve array de elementos.

Por ejemplo $('#clip') devuelve [<video width=​"390" id=​"clip" controls>​…​</video>​] que en realidad es una matriz de un elemento DOM. Para acceder al elemento DOM real necesita dirigirse a uno de los elementos de la matriz haciendo algo como $('#clip')[0]. Ahora puedes decirle a este elemento DOM que PLAY.

Así que hacer esto:

var movie = $('#video_with_controls'); 

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

Este es mi ejemplo:

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() 
}); 

que funciona: http://jsbin.com/erekal/3