[英]Changing html5 video source with preloading
I'm setting up a video portfolio site to showcase different concepts for software devs, and there are often multiple versions of the same video. 我正在建立一个视频作品集网站,以展示针对软件开发人员的不同概念,并且同一视频通常有多个版本。
I wrote the following javascript to change videos and it works fine locally, the problem is that once its hosted changing videos breaks the video player. 我写了以下JavaScript来更改视频,并且在本地运行良好,问题是一旦托管的更改视频中断了视频播放器。 I'm guessing the cause is because the new video is not loaded.
我猜测原因是因为未加载新视频。 Any ideas?
有任何想法吗?
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();
}
The html for the video player looks like this: 视频播放器的html如下所示:
<video id="container1" controls="" loop="" preload="auto" width="1280" height="720">
<source id="video1" src="videos/Reminder.mp4" type="video/mp4">
</video>
Try : 尝试:
videoContainer.addEventListener('canplay', function() {
videoContainer.play();
videoContainer.removeEventListener('canplay');
});
videoSource.setAttribute('src', video);
videoContainer.load();
canplay
is fired when the browser supposes you have received enough of the file and you can continue playing it considering your connection speed. 当浏览器认为您已经收到足够的文件时,就会触发
canplay
,并且您可以考虑连接速度继续播放它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.