HTML5 Video to play after AJAX page load

Question

I am struggling to get an HTML5 video to play when arriving at the page via an AJAX request.

If you refresh the page, or land directly on the page, it works fine. But wh

Answer 1

For anyone struggling with the same issue, I found that after the ajax call the video had the property 'paused: true' even thought autoplay was set and I was calling video.play() on 'loadeddata'.

The solution was to trigger video.play() when pause is detected. I also found that it worked smoother not having the 'autoplay' attribute on the video and became jerky after multiple initialisations.

DOM:

<video id="video" loop muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

JS:

video = jQuery('#video').get()[0];

video.addEventListener('loadeddata', function() {
    video.play();
});

video.addEventListener('pause', function() {
    video.play();
});

Also, for anyone wondering why I might want this ability, it is for a video playing on the background of a webpage, hence no need for user to play/pause it.

Answer 2

you can call video.play() before your ajax calling. like html

<video id="video">...</video>
<a href="javascript:play()"></a>

JS

function play() {

$("#video")[0].play(); // call play here !!!

$.ajax(
"your url",
{your data},
function() {
 $("#video")[0].play(); // usually we call play() here, but it will be pause beccause it can not be play if not in click or touch event sync
 ....
}
);
}

Answer 3

Your video tag has no ID. What if you had two <video> tags? You want:

<video id="blah"...

and then:

video = document.getElementById('blah');

Answer 4

Potentially it's a syntax error, because you seem to have some PHP leaking into the HTML in the form of '; ?> at the end of the poster and src attributes.