通過預加載更改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 ，並且您可以考慮連接速度繼續播放它。