JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/dist/cld-video-player.min.js" 
    type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/dist/cld-video-player.min.css" rel="stylesheet">


<video id="player" data-cld-seek-thumbnails="true" controls playsinline class="cld-video-player"></video>
</div>

<script>
 

  var cld = cloudinary.Cloudinary.new({ cloud_name: 'shirly-assets' });
  
var player = cld.videoPlayer('player', 
                               {
    sourceTypes: ["hls"],
    fluid: false,
  width:640,
    controls: true,

});
  
player.source('https://res.cloudinary.com/shirly-assets/video/upload/v1716475305/TranslateWithAzure.mp4', { 
  sourceTypes: ['hls'] ,
  textTracks: {
        "captions": {
            "label": "English",
            "language": "en",
            "url": "https://res.cloudinary.com/shirly-assets/raw/upload/v1716475394/TranslateWithAzure.et-EE.azure.transcript",
            "default": true
        },subtitles: [{
      label: 'English',
      language: 'en',
      url: 'https://res.cloudinary.com/jstickney/raw/upload/v1612214668/demo/cars.com/sv.vtt'
    }]
              },
  transformation: [{
 streaming_profile: 'hd'}]}).play();
 </script>