title: HTML5 Video, with Javascript to change source, not loading on Safari, fine on Chrome
body: <p>I am currently working on a site that has a full page video background that changes video using JavaScript at the end of each video. It works perfectly on Chrome or Firefox, however, it just won't load the videos on Safari, it stays blank. When I look at resources in inspector, all I see is </p>
  
  <blockquote>
    <p>An error occurred trying to load the resource. </p>
  </blockquote>
  
  <p><a href="http://www.kingsarmspentyrch.co.uk" rel="nofollow">Site</a></p>
  
  <p>Any help would be extremely appreciated as it is driving me nuts!</p>
  
  <p>EDIT - </p>
  
  <p>Here is the HTML for the video:</p>
  
  <pre><code>&lt;video id="homepagevid" poster="/wp-content/uploads/2015/11/Scallops2-Image.jpg" autoplay="autoplay" muted="muted" width="300" height="150"&gt;
  &lt;source src="http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Scallops.mp4" type="video/mp4" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Here's the js I use to change videos - </p>
  
  <pre><code>var nextVideo = ["http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Scallops.mp4","http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Meat.mp4","http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Pudding.mp4","http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Bread.mp4", "http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Tomatoes.mp4"];
  var nextPoster = "http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/black.jpg";
  var currentVideo = 0;
  var homepagevid = document.getElementById('homepagevid');
  homepagevid.onended = function(){
      if(currentVideo === 0){
          homepagevid.src = nextVideo[1];
          currentVideo = 1;
      } else if(currentVideo === 1){
          homepagevid.src = nextVideo[2];
          currentVideo = 2;
      } else if(currentVideo === 2){
          homepagevid.src = nextVideo[3];
          currentVideo = 3;
      } else if(currentVideo === 3){
          homepagevid.src = nextVideo[4];
          currentVideo = 4;
      } else if(currentVideo === 4) {
          homepagevid.src = nextVideo[0];
          currentVideo = 0;
      }
  };
  
  homepagevid.oncanplay = function(){
          homepagevid.poster = nextPoster;
  };
  </code></pre>
  
  <p>Cheers For Any Help guys, this is driving me insane. </p>
  
  <p>Dave</p>