Riproduzione automatica di un video HTML5 su Caricamento dom utilizzando jQuery

Question

Sto provando a riprodurre un video non appena dom è stato caricato utilizzando jQuery. Questo è il mio codice:

HTML

<video id="video" width="420"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
    <p>Your browser does not support HTML5 video.</p> 
</video> 

JS (script.js)

$(document).ready(function() { 
    $(#video).play(); 
}); 

Quando Dom carica il video non viene riprodotto, dove am Ho sbagliato? Grazie in anticipo.

Answer 1

Il selettore jQuery $("#video") restituisce un oggetto jQuery. Dal momento che play() è una funzione dell'elemento DOM, è necessario ottenere l'elemento DOM con:

$("#video").get(0); 

prima di utilizzare il metodo .play():

$("#video").get(0).play(); 

Edit: È inoltre possibile utilizzare HTML5 tag selezionati in caso jQuery fall back. Nota il tag autoplay.

<video controls="controls" autoplay="autoplay" loop="loop" 
width="233" height="147" poster="//www.cdn.com//video.png" 
preload="auto" title="Video"> 
    <source src="//www.cdn.com/video.mp4" type="video/mp4"/> 
    <source src="//www.cdn.com/video.ogv" type="video/ogv"/> 
    <source src="//www.cdn.com/video.webm" type="video/webm"/> 
</video> 

Answer 2

so che non è jQuery, ma in javascript standard HTML5 è possibile utilizzare:

var video = document.getElementById("target_video"); 
video.autoplay = true; 
video.load();