play multiple videos for different time duration?

Question

I am creating a page with multiple videos slide show(video playinf one by one correctly). But now I want to add time duration to each video.

I have a four videos(array in javascript) and I want to play first video(2mins video)for 15mins and second(10mins) video for 30mins and so on. Please tell me guys, how to do it?

//my code

//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>

My javascript code for one video timing is working.

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();
  }
});

this might help https://stackoverflow.com/questions/47643091/html5-video-start-video-at-certain-time-and-play-for-x-amount-of-time — Harshit, Feb 05 '19 at 07:29
_"I want to play first video(2mins video)for 15mins and second(10mins) video for 30mins and so on"_ Are you trying to loop playback of one or more videos for N times? Or playback only certain time slices of media? — guest271314, Feb 05 '19 at 07:35
@MrMaavin No, this question is not a duplicate of the linked question. Polling `.currentTime` is not necessary and is less than accurate. — guest271314, Feb 05 '19 at 07:36
**Try to implement setTimeout() and setInterval() function for this.** Kindly refer : https://www.w3schools.com/js/js_timing.asp — Ashish, Feb 05 '19 at 07:33
@sudeshsharma Yes, to what part of the question at the comment? — guest271314, Feb 05 '19 at 07:38
Are you trying to 1) loop media playback of one or more videos; or 2) play only specific time slices of one or more videos? — guest271314, Feb 05 '19 at 07:40
You can use the `loop` attribute and count how many times the `ended` event has been dispatched. For _"first video(2mins video)for 15mins"_ are you trying to pause the playback at the halfway point of the last of 8 loops? Or do you mean 16 minutes? — guest271314, Feb 05 '19 at 07:46

score 1 · Answer 1 · answered Feb 05 '19 at 07:43

1

You need to setTimeout to change the video. Have a look at getPlayTime function which returns the time in miliseconds. This is the amount of time a video will be played. I hope this helps.

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);
}

answered Feb 05 '19 at 07:43

Divanshu

423
3
12

Thanks but only 1st video is playing for 41secs. – Feb 05 '19 at 08:40
@sudeshsharma You need to modify getPlayTime function as per your needs. – Divanshu Feb 05 '19 at 08:42
My first video length(means duration is 41 sec). According to above code my first video(colagte) runs only one time(41 sec) . – Feb 05 '19 at 08:50
@sudeshsharma Please accept the correct answer and comment about what else did you modify in order to make the thing work. This is useful for the community. – Divanshu Feb 05 '19 at 11:48

score 0 · Answer 2 · answered Feb 05 '19 at 12:21

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>

play multiple videos for different time duration?

2 Answers2