CODEWITHSUNDEEP
javascriptvideo
Rizwan Syed
Rizwan Syed

Reputation: 1

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

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

Upvotes: 0

Views: 3361

Answers (3)

flori27
flori27

Reputation: 11

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

Upvotes: 1

Jordi Flores
Jordi Flores

Reputation: 2150

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>

Upvotes: 0

Ana F
Ana F

Reputation: 641

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

Upvotes: 0

Related Questions