javascript - HTML5 视频，使用 Javascript 更改源，无法在 Safari 上加载，在 Chrome 上正常

Question

我目前正在开发一个具有整页视频背景的网站，该网站可以在每个视频末尾使用 JavaScript 更改视频。它在 Chrome 或 Firefox 上完美运行，但是，它只是不会在 Safari 上加载视频，它保持空白。当我在检查器中查看资源时，我看到的只是

An error occurred trying to load the resource.

Site

任何帮助都将非常感激，因为它让我发疯!

编辑-

以下是视频的 HTML:

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

这是我用来更改视频的 js -

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

为任何帮助干杯，这让我发疯。

戴夫

Answer 1

在 canplay 事件回调中，您“隐藏”视频并将海报放在上​​面。如果您从 canplay 事件回调中删除 homepagevid.poster = nextPoster;，您将观看所有视频。如果您愿意，可以将 homepagevid.poster = nextPoster; 放在结束事件回调的开头。