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 when navigating to the page via AJAX it does not play.

The code is:

<video id="video" autoplay="autoplay" loop="loop" muted="muted" poster="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg">
                   <source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.mp4" type="video/mp4">
                   <source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.webmhd.webm" type="video/webm">
                   <img src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg" alt="your browser does not support html5 video">
               </video>

I have tried firing the following code on success of AJAX page load:

video = document.getElementById('video');
    video.load();

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

And also simply:

video = document.getElementById('video');
video.play();

I have also tried using plugins such as video.js, but to no avail.

I can't help but think I am missing something really simple. Surely if the video is on the page and has autoplay set, then it should just play regardless of whether you arrive at the page via AJAX or directly?

The AJAX request for the page only updates the #main element (which the video is inside) and the does history.pushState - could that be anything to do with it? It doesn't seem likely...

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.

Answer 5

It seems like these answers do not work anymore. I tried the accepted one, and it didn't work.

It looks like Chrome can't find the video object and it stands as undefined.

You can do something else. Quite simple. You use the Global Event Handlers .ajaxSuccess as a marker for that the request has been handled and the video can now play.

In that way you are sure that the video object exist. And for Chrome you do a little if statement.

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

jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
        if( video ) {
            video.play();
        } else { 
          // Chrome can't find the video object and throws a 'undefined'
          // Therefore you have to activate the video manually

            jQuery("#videoID")[0].play();
        }
});