title: HTML5 Video to play after AJAX page load
body: <p>I am struggling to get an HTML5 video to play when arriving at the page via an AJAX request.</p>
  
  <p>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.</p>
  
  <p>The  code is:</p>
  
  <pre><code>&lt;video id="video" autoplay="autoplay" loop="loop" muted="muted" poster="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg"&gt;
                     &lt;source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.mp4" type="video/mp4"&gt;
                     &lt;source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.webmhd.webm" type="video/webm"&gt;
                     &lt;img src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg" alt="your browser does not support html5 video"&gt;
                 &lt;/video&gt;
  </code></pre>
  
  <p>I have tried firing the following code on success of AJAX page load:</p>
  
  <pre><code>video = document.getElementById('video');
      video.load();
  
      video.addEventListener('loadeddata', function() {
          video.play();
      }, false);
  </code></pre>
  
  <p>And also simply:</p>
  
  <pre><code>video = document.getElementById('video');
  video.play();
  </code></pre>
  
  <p>I have also tried using plugins such as video.js, but to no avail.</p>
  
  <p>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?</p>
  
  <p>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...</p>