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

Answer 3

$('video#video').each( (i,e) => e.play() );

As Justin McDonald noted, the play() method exists on the Video DOM Node itself, so you first have to resolve the jQuery Object to the specific Node. However, his solution will throw an error if the element with id="video" does not exist or is not a video Node.