Come accedere ai metodi video HTML5 con jQuery?

Question

Sto scrivendo un'app HTML5 e sto cercando di accedere ai metodi video nativi (riproduzione, pausa, ecc.) E utilizzare jQuery. Non voglio usare altri plugin.

var movie = $('#video_with_controls'); 

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

Ma quando eseguo il codice precedente, ottengo il seguente messaggio di errore console:

Object has no method 'play' 

Come posso risolvere questo problema? Grazie.

Answer 1

L'elemento DOM HTML5 video ha il metodo .play(). Non esiste un metodo di riproduzione in jQuery yet. Quello che stai facendo male è sparare la riproduzione da un selettore jQuery che restituisce array di elementi.

Ad esempio $('#clip') restituisce [<video width=​"390" id=​"clip" controls>​…​</video>​] che in realtà è un array di un elemento DOM. Per accedere all'elemento DOM reale devi indirizzare uno degli elementi dell'array facendo qualcosa come $('#clip')[0]. Ora puoi dire questo elemento DOM a PLAY.

Quindi solo fare questo:

var movie = $('#video_with_controls'); 

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

Questo è il mio esempio:

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

che funziona: http://jsbin.com/erekal/3