通过预加载更改html5视频源

Question

我正在建立一个视频作品集网站，以展示针对软件开发人员的不同概念，并且同一视频通常有多个版本。

我写了以下JavaScript来更改视频，并且在本地运行良好，问题是一旦托管的更改视频中断了视频播放器。 我猜测原因是因为未加载新视频。 有任何想法吗？

function switcher(wrapper, e, source, container, video){

//get current version and turn off its style
var off = document.getElementById(wrapper).getElementsByClassName("versionActive")[0];
off.className = "version";

//turn on the new button
e.className = "versionActive";

var videoSource = document.getElementById(source);
var videoContainer = document.getElementById(container);

lastPlayingVideo.currentTime = 0;
lastPlayingVideo.pause();
lastPlayingVideo = videoContainer;

videoSource.setAttribute('src', video);
videoContainer.load();
videoContainer.play();

}

视频播放器的html如下所示：

<video id="container1" controls="" loop="" preload="auto" width="1280" height="720">
     <source id="video1" src="videos/Reminder.mp4" type="video/mp4">
</video>

Answer 1

尝试：

videoContainer.addEventListener('canplay', function() {
   videoContainer.play();
   videoContainer.removeEventListener('canplay');
});
videoSource.setAttribute('src', video);
videoContainer.load();

当浏览器认为您已经收到足够的文件时，就会触发canplay ，并且您可以考虑连接速度继续播放它。