JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.js" type="text/javascript">
<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.1.5/videojs.ads.js" type="javascript"></script>
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player@edge/dist/cld-video-player.min.js" 
    type="text/javascript"></script>
<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js" type="text/javascript"></script>
<video
        id="example-player"
        controls
        muted
        autoplay
        class="cld-video-player cld-video-player-skin-dark"
        data-cld-transformation='{ "width": 500, "crop": "limit","start_offset":3 }'>
      </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();
      });