JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js" type="text/javascript"></script>

<video
  id="example-player"
  controls
  muted
  class="cld-video-player cld-video-player-skin-dark"
  data-cld-public-id="myvideo">
</video>

<link href="https://unpkg.com/[email protected]/dist/cld-video-player.min.css" rel="stylesheet">
<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>

JavaScript

var cld = cloudinary.Cloudinary.new({ cloud_name: 'shirly' })
var myAdTag = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";
// Initialize player
var player = cld.videoPlayer("example-player", {
  playlistWidget: {
    direction: "horizontal",
    total: 4
  },
  ads: {
    adTagUrl: myAdTag, 
    locale:"es",
    adsInPlaylist: 'first-video', 
    adLabel:"Tu video comenzará en"
    }
});

// Modify player source and play hls adaptive streaming
player.source('dog', { sourceTypes: ['hls'], 
transformation: { streaming_profile: 'full_hd' } }).play();