JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.2/videojs-dash.min.js"></script>

  <div class="container">
    <h1>Cloudinary Video Player</h1>
    

    <div class="row">
      <center>
        <video
          id="example-player"
          controls
          loop
          class="cld-video-player cld-video-player-skin-orange"
          data-cld-transformation='{ "width": 200, "crop": "limit" }'>
        </video>

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

JavaScript

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

    // Initialize player
    var player = cld.videoPlayer('example-player')
    player.source({ publicId: 'oceans', transformation: { angle: 10} })

    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)