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":300, "quality": "auto", "format": "auto" }'>
        </video>

 
      </center>
    </div>
  </div>

JavaScript

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

    // Initialize player
    var player = cld.videoPlayer('example-player')
    player.source({ publicId: 'dog',"poster": "https://res.cloudinary.com/demo/image/upload/sample.jpg" })

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

    player.on('sourcechanged', updateSource)