Cloudinary Video Player

Playlist by tag

Cloudinary allows you to add tags to an uploaded resource.
It also allows you to list resources with a specified tag. The player leverages this ability and supports a creation of a playlist by a specified tag.
NOTE: In order to support resource listing by tag (required for 'playlist by tag' to work), make sure to enable it in the Cloudinary console: Settings | Security | Restricted image types | Resource list

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>

      <div class="well" id="playlist-data">
      </div>

      JavaScript:

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

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

      // Pass a sorter to sort list in alphabetical order by publicId
      var sorter = function(a, b) {
        if (a.publicId < b.publicId) return 1;
        if (a.publicId > b.publicId) return -1;
        return 0;
      };

      // Fetch playlist by tag. Since this operation involves an API call
      // the function returns a Promise when the operation completes.
      // The return value is 'player'.
      player.playlistByTag('demo', {
        sorter: sorter,
        sourceParams: { angle: 13 },
        autoAdvance: 0,
        repeat: true
      }).then(function(player) {
        var divElem = document.querySelector("div#playlist-data");
        var list = player.playlist().list().map(function(source) {
          return source.publicId()
        }).join(', ');

        divElem.innerText = "Playlist: " + list
      });

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

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