How to play multiple youtube or vimeo videos one after another dynamically using Javascript

Question

How to play multiple youtube or vimeo videos one after another dynamically using JavaScript?

For Example: I need some one to help in task. i have four videos. Each video should be play one after another but this four videos are taged in Menu list. By default first video have to play remaining three videos should be in-active, when the first video completed then user need to click on second menu list.. Please help me, i have no idea regarding this concept

For Reference Please see this Image to get an idea

score 1 · Answer 1 · edited Dec 23 '17 at 18:42

1

Very easy for Youtube. You need only one iframe and give the extra YouTube video ids in the query string ("playlist"), separated by commas.

<iframe
  id="p_1_zone_4_video"
  onload="oniframeYtLoaded(this)"
  style="width:100%; height:100%;border:0 none;" 
  src="https://www.youtube.com/embed/xKXaEJZxRHQ?loop=1&enablejsapi=1&playlist=yALuTl2THO0,yL1-MUdJ-2I">

edited Dec 23 '17 at 18:42

Rich Churcher

7,361
3
37
60

answered Jan 13 '17 at 07:51

flori27

11
1

score 0 · Answer 2 · edited May 23 '17 at 12:13

In reference to this stack:

HTML5 video loop src change on end play function not working

You can achieve this using video html5 tag and javascript. Take note the snippet will not work cause missing videos, but you can look the way to achieve your objective.

var videosList = ["video1.mp4", "video2.mp4", "video3.mp4", "video4.mp4"]

video_count = 1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == videosList.length) 
          video_count = 0;
        var nextVideo = "app/video"+videosList[video_count];
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };

<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="app/video1.mp4" type='video/mp4'/>
</video>

If you need youtube videos, you need to use the youtube api like in this example, and check for the onPlayerStateChange in order to play the next video:

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
  </body>
</html>

Thank you for you Answer but i need to play you tube videos and vimeo videos — Rizwan Syed, Oct 19 '16 at 11:24
I've just added an example on how to use youtube api, for vimeo videos, you'll need to use another api, and surely use another approach. — Jordi Flores, Oct 19 '16 at 12:18

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

The way I understand your problem, initially only the first video can be played. When that's finished, the second video button is made active and if the user clicks it, then the second video starts playing.

You need to add an active(canBePlayed) property on the object that holds your video info. Only the first one is true (all others - false). If a video is active, it's button is active, otherwise the button is disabled and cannot be clicked.

On button click - play video. On video end, next video is active. This is how to detect video end: Detect when an HTML5 video finishes

edited May 23 '17 at 11:45

Community

1
1

answered Oct 19 '16 at 11:03

Ana F

641
4
13

Thank you for you Answer but i need to play you tube videos and vimeo videos because video tag only support some format as we know – Rizwan Syed Oct 19 '16 at 11:26

How to play multiple youtube or vimeo videos one after another dynamically using Javascript

3 Answers3