HTML5视频，使用Javascript更改源代码，不在Safari上加载，在Chrome上也可以

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

本文关键字：Safari 加载 Chrome 也可以 不在 源代码 使用 视频 Javascript HTML5      更新时间：2023-09-26

我目前在一个网站上工作，该网站有一个完整的页面视频背景，可以在每个视频结束时使用JavaScript更改视频。它在Chrome或Firefox上运行得很好，但它不会在Safari上加载视频，它保持空白。当我查看检查器中的资源时，我看到的只是

尝试加载资源时出错。

站点

任何帮助都将不胜感激，因为这会让我发疯！

编辑-

这是视频的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;
};

为任何帮助干杯伙计们，这让我发疯了。

Dave

在canplay事件回调中，您正在"隐藏"将海报放在上面的视频。如果从canplay活动回调中删除homepagevid.poster = nextPoster;，您将观看所有视频。如果需要，可以将homepagevid.poster = nextPoster;放在结束的事件回调的开头。

相关文章：