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会被触发。

通过预加载更改html5视频源

1 个答案: