How to enable JQuery video autoplay

Question

Just wondering how to get a video to load and autoplay, once another video is finished playing. I'm a bit of a noob, and I'm really

HTML

<div class="videoWrapper">
    <video id="video2" controls>
        <source src="videos/wotebackinupsong.mp4">
        <source src="videos/wotebackinupsong.ogv">
    </video>
</div>

JS

$(document).ready(function() {
    $('#video2').hide(function() {});
    $('#video1').bind('ended', function() {
        $('#video2').show();
    });
});

So far, I've got the 2nd video to hide when the page loads, and got it to show once the 1st video is finished playing. Just need to know how to make it to autoplay.

Answer 1

you can bind event for listening video play end of video 1 with

with javascript

var video1 = document.getElementsByID('video1');
var video2 = document.getElementsByID('video2');
video1.onended = function(e) {
  video2.style.display = "none";
  video2.play()
}

with jquery

var video1 = $('video1');
var video2 = $('video2')[0];
video1.onended = function(e) {
  video2.show();
  video2.play()
}

Answer 2

$("#video2")[0].play();

should play the second video.