Auto-play an HTML5 video on Dom Load using jQuery

Question

I'm trying to play a video as soon as the dom has loaded using jQuery. This is my code:

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

When you dom loads the video does not play, where am I going wrong? Thanks in advance.

Answer 1

The jQuery selector $("#video") returns a jQuery object. Since play() is a function of the DOM element, you must get the DOM element with:

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

before using .play() method:

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

Edit: You can also use HTML5 selected tags in case jQuery fall back. Note the autoplay tag.

<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

I know is not jQuery but in standard javascript with html5 you can use:

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