Cloudinary Video Player

Playlist

The player supports a creation of a playlist. A playlist allows you to define a list of videos which should be played one after another. You may also define:

Whether the player should auto advance and play the next video in the playlist when the current video ends ('autoAdvance' param).
Whether the player should play the playlist from the start when the last video ends ('repeat' param).
Whether the player should present the upcoming video before the current video ends ('presentUpcoming' param).

You may also define whether the playlist should repeat when the last video ends ('repeat' param)
Finally.

Example Code:

      HTML:

      <video
        id="example-player"
        controls
        muted
        autoplay
        class="cld-video-player cld-video-player-skin-dark"
        data-cld-transformation='{ "width": 500, "crop": "limit" }'>
      </video>

      <button id="play-prev" class="btn btn-default">Prev</button>
      <button id="play-next" class="btn btn-default">Next</button>

      <div id="source-data">
        <span id="public-id-placeholder"></span><br>
        <span id="source-url-placeholder"></span>
      </div>


      JavaScript:

      var cld = cloudinary.Cloudinary.new({ cloud_name: 'miki-cloudinary' });

      // Define playlist sources
      var source1 = { publicId: 'oceans', info: { title: 'Oceans', subtitle: 'A movie about oceans' } };
      var source2 = { publicId: 'book', info: { title: 'Cloud Book Study', subtitle: 'A short video with a nice book animation' } };
      var source3 = { publicId: 'negative', info: { title: 'Negative' } };

      // Initialize player
      var player = cld.videoPlayer('example-player');

      // Auto advance to next video after 0 seconds, repeat the playlist when final video ends, and present upcoming video 5 seconds before the current video ends.
      player.playlist([source1, source2], { autoAdvance: true, repeat: true, presentUpcoming: 8 });

      function updateSource() {
        var divElem = document.querySelector("div#source-data");

        publicIdElem = divElem.querySelector("#public-id-placeholder");
        sourceUrlElem = divElem.querySelector("#source-url-placeholder");

        publicIdElem.innerText = "Public Id: " + player.currentPublicId();
        sourceUrlElem.innerText = "Source URL: " + player.currentSourceUrl();

        console.log(sourceUrlElem.innerText);
        divElem.style.display = 'block';
      };

      player.on('sourcechanged', updateSource);

      document.querySelector("button#play-prev").addEventListener("click", function() {
        player.playPrevious();
      });

      document.querySelector("button#play-next").addEventListener("click", function() {
        player.playNext();
      });