HTML5 Video, with Javascript to change source, not loading on Safari, fine on Chrome

Question

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

An error occurred trying to load the resource.

Site

Any help would be extremely appreciated as it is driving me nuts!

EDIT -

Here is the HTML for the video:

<video id="homepagevid" poster="/wp-content/uploads/2015/11/Scallops2-Image.jpg" autoplay="autoplay" muted="muted" width="300" height="150">
<source src="http://www.kingsarmspentyrch.co.uk/wp-content/uploads/2015/11/Scallops.mp4" type="video/mp4" />
</video>

Here's the js I use to change videos -

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;
};

Cheers For Any Help guys, this is driving me insane.

Dave

Answer 1

In the canplay event callback you are 'hidding' the video putting the poster over it. If you remove the homepagevid.poster = nextPoster; from the canplay event callback you will watch all the videos. If you want you can put the homepagevid.poster = nextPoster; at the beginning of the ended event callback.