javascript - HTML5 视频 - 如何无缝播放多个视频然后循环播放序列?
问题描述
我知道以前有人问过类似的问题,但没有一个能够解决这个特定的问题,他们只解决了部分问题。
我想实现以下目标:
- 我们有很多视频。我们称它们为
video1
,video2
,video3
,video4
andvideo5
。 - 视频以有序的顺序播放,并在无限循环中重复 - 所以在
video1
完成后,video2
播放,然后,,video3
然后再次从video4
video5
video1
。 - 起点必须是随机的。所以整个序列应该从列表中随机选择的视频开始,然后按正常顺序遍历列表的其余部分。如果它随机选择从 开始
video3
,它将继续播放video4
,video5
,video1
等video2
。 - 序列的回放必须在没有任何用户输入的情况下自动开始。
- 现在这最后一点是最困难的一点:每个视频的播放之间必须没有间隙。
我已经能够编写一个从第 1 点到第 4 点执行所有操作的代码,但我无法解决第 5 点!
这是我的代码。我已将视频的 设置background-color
为使视频red
之间的间隙可见 - 您将能够在每个视频的播放之间看到红色闪烁。这就是我需要解决的问题:我需要消除那一瞬间的间隙,以便播放绝对无缝。
var vidElement = document.getElementById('video');
var vidSources = [
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4"
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// update the active video index
activeVideo = (++activeVideo) % vidSources.length;
if(activeVideo === vidSources.length){
activeVideo = 0;
}
// update the video source and play
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
video { background-color: red }
<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="video" autoplay muted playsinline></video>
<p>(each video is just ~ 10 seconds)</p>
解决方案
您可以创建两个video
具有属性的元素preload
并将其添加到 div 容器中。然后我们可以通过切换显示状态来切换视频,如下所示:
var videoContainer = document.getElementById('videoContainer'),
output = document.getElementById('output'),
nextVideo,
videoObjects =
[
document.createElement('video'),
document.createElement('video')
],
vidSources =
[
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4"
//this list could be additionally filled without any other changing from code
],
//random starting point
nextActiveVideo = Math.floor((Math.random() * vidSources.length));
videoObjects[0].inx = 0; //set index
videoObjects[1].inx = 1;
initVideoElement(videoObjects[0]);
initVideoElement(videoObjects[1]);
videoObjects[0].autoplay = true;
videoObjects[0].src = vidSources[nextActiveVideo];
videoContainer.appendChild(videoObjects[0]);
videoObjects[1].style.display = 'none';
videoContainer.appendChild(videoObjects[1]);
function initVideoElement(video)
{
video.playsinline = true;
video.muted = false;
video.preload = 'auto'; //but do not set autoplay, because it deletes preload
//loadedmetadata is wrong because if we use it then we get endless loop
video.onplaying = function(e)
{
output.innerHTML = 'Current video source index: ' + nextActiveVideo;
//select next index. If is equal vidSources.length then it is 0
nextActiveVideo = ++nextActiveVideo % vidSources.length;
//replace the video elements against each other:
if(this.inx == 0)
nextVideo = videoObjects[1];
else
nextVideo = videoObjects[0];
nextVideo.src = vidSources[nextActiveVideo];
nextVideo.pause();
};
video.onended = function(e)
{
this.style.display = 'none';
nextVideo.style.display = 'block';
nextVideo.play();
};
}
video{background-color: red}
<div id="videoContainer" style="display:inline-block"></div>
<b id="output" style="vertical-align:top"></b>
推荐阅读
- php - 由于不活动,页面已过期。请刷新并在登录中重试
- ios - 在 Swift 中使用区域设置获取国家/地区代码(电话)
- java - 如何过滤 JSON 数组
- java - Elasticsearch MultiSearchRequestBuilder
- angularjs - AngularJS记录不会显示在列表页面中,直到页面没有刷新..?
- javascript - 阻止 Webpack 的默认加载器运行
- php - 连接到 PHP 中的 FTP 服务器时没有列出目录
- javascript - createReactClass 和 (React) 类中 this 的值
- postgresql - 休眠列“fulfillment_status”的类型为fulfillment_status,但表达式的类型为字符变化
- python - 我可以在没有“with”语句的情况下调用 tf.variable_scope 吗?