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

您需要setTimeout才能更改视频。看一下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);
}

Answer 2

Thanks Everyone for helping me    
This code is working my side

    <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 loop id="myVideo"  width="100%" height="auto"></video></center></div>
    <script type="text/javascript">
    var videoSource = new Array();
    videoSource[0] = 'Colgate.mp4';
    videoSource[1] = 'Soap.mp4';
    videoSource[2] = 'HeroPassion.mp4';
    videoSource[3] = 'Vodafone.mp4';
    var currentVideo = 0;
    var videoCount = videoSource.length;
    function getPlayTime(videoNum) {
      if(videoNum === 0){
      console.log("videoplay",videoNum);
        return 1*60*1000
    }
      if(videoNum === 1){
      console.log("videoplay",videoNum);
        return 2*60*1000
    }
    if(videoNum === 2){
      console.log("videoplay",videoNum);
        return 1*60*1000
    }
      if(videoNum === 3){
      console.log("videoplay",videoNum);
        return 1*60*1000
    }
    }
    function videoPlay(videoNum) {
        document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
        document.getElementById("myVideo").load();
        document.getElementById("myVideo").play();

        setTimeout(changeVideo, getPlayTime(videoNum));
    }
    console.log("play start first time");
    videoPlay(3);

    function changeVideo() {
        console.log("enter in changeVideo function");
        currentVideo++;
        console.log("changeVideo function called");
        if (currentVideo === (videoCount - 1)) {
            currentVideo = 0;
        }
        videoPlay(currentVideo);
    }
    </script>

播放不同时间段的多个视频？

2 个答案: