javascript - 播放不同时长的多个视频？

Question

我正在创建一个包含多个视频幻灯片放映的页面(视频一一正确播放)。但现在我想为每个视频添加持续时间。

我有四个视频(javascript 中的数组)，我想播放第一个视频(2 分钟的视频)15 分钟，第二个视频(10 分钟)播放 30 分钟，依此类推。请告诉我，该怎么做？

//我的代码

//multiple video playing code
var videoSource = new Array();
videoSource[0] = 'Colgate.mp4';
videoSource[1] = 'Soap.mp4';
var i = 0;
var videoCount = videoSource.length;
//document.getElementById("myVideo").setAttribute("src",videoSource[0]);
function videoPlay(videoNum) {
  document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
  document.getElementById("myVideo").load();
  document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(1);

function myHandler() {
  i++;
  if (i == (videoCount - 1)) {
    i = 0;
    videoPlay(i);
  } else {
    videoPlay(i);
  }
}

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="100%" height="auto" id="vlc" loop="yes" autoplay="yes"></embed>
<center><video controls autoplay id="myVideo" width="100%" height="auto"></video></center>
</div>

我的一个视频计时的 JavaScript 代码正在运行。

var video = document.getElementById('myVideo');

var videoStartTime = 0;
var durationTime = 0;

video.addEventListener('loadedmetadata', function() {
  videoStartTime = 20;
  durationTime = 22;
  this.currentTime = videoStartTime;
}, false);
video.addEventListener('timeupdate', function() {
  if(this.currentTime > videoStartTime + durationTime){
    this.pause();
  }
});

Answer 1

您需要设置超时才能更改视频。看一下 getPlayTime 函数，它返回以毫秒为单位的时间。这是视频的播放时间。我希望这会有所帮助。

var videoSource = new Array();
videoSource[0] = 'Colgate.mp4';
videoSource[1] = 'Soap.mp4';

var currentVideo = 0;
var videoCount = videoSource.length;

function getPlayTime(videoNum) {
  if(videoNum == 1)
    return 10*60*1000;
  if(videoNum == 2)
    return 15*60*1000;
}

function videoPlay(videoNum) {
    document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
    document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();
    setTimeout(changeVideo, getPlayTime(videoNum));
}

videoPlay(1);

function changeVideo() {
    currentVideo++;
    if (currentVideo == (videoCount - 1)) {
        currentVideo = 0;
    }
    videoPlay(currentVideo);
}