[英]HTML5 Video, with Javascript to change source, not loading on Safari, fine on Chrome
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. 我目前正在一个拥有全页视频背景的网站上工作,该背景会在每个视频末尾使用JavaScript更改视频。 It works perfectly on Chrome or Firefox, however, it just won't load the videos on Safari, it stays blank.
它可以在Chrome或Firefox上完美运行,但是,它不会在Safari上加载视频,而是保持空白。 When I look at resources in inspector, all I see is
当我查看检查器中的资源时,我看到的只是
An error occurred trying to load the resource.
尝试加载资源时发生错误。
Any help would be extremely appreciated as it is driving me nuts! 任何帮助将不胜感激,因为它使我发疯!
EDIT - 编辑-
Here is the HTML for the video: 这是视频的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>
Here's the js I use to change videos - 这是我用来更改视频的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;
};
Cheers For Any Help guys, this is driving me insane. 为任何帮助者欢呼,这让我发疯。
Dave 戴夫
In the canplay event callback you are 'hidding' the video putting the poster over it. 在canplay事件回调中,您正在“隐藏”视频,将海报放在上面。 If you remove the
homepagevid.poster = nextPoster;
如果删除
homepagevid.poster = nextPoster;
from the canplay event callback you will watch all the videos. 从canplay事件回调中,您将观看所有视频。 If you want you can put the
homepagevid.poster = nextPoster;
如果需要,可以放置
homepagevid.poster = nextPoster;
at the beginning of the ended event callback. 在结束事件回调的开始处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.