JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.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" }'>
      </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>

React

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

 // 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'.
 function playVideo(myTag) {

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