JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<div id="vast-player" style="width:300px;height:170px;background:#000000"></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="mute">Mute</button>
<button id="unmute">Unmute</button>
<button id="resize">Resize - 400x225</button>

JavaScript

var player;

//register the call back for Alchemy Player load event...
window._alchemyPlayerUnitLoaded = function(){
  console.log('Alchemy Unit Player Has Loaded...');
  player = new AlchemyPlayerUnit('vast-player',{
    vastXML: '<?xml version="1.0" encoding="UTF-8"?><VAST version="2.0"><Ad id="001"><InLine><AdSystem version="0.01">VNTSM</AdSystem><AdTitle>VNTSM Template</AdTitle><Creatives><Creative sequence="1" id="0001"><Linear><Duration>00:00:30</Duration><TrackingEvents /><VideoClicks><ClickThrough><![CDATA[http://www.mcdonalds.co.uk/ukhome.html]]></ClickThrough></VideoClicks><MediaFiles><MediaFile delivery="progressive" type="video/mp4"><![CDATA[https://s3.amazonaws.com/alchemy-video-assets/mcdonalds.mp4]]></MediaFile></MediaFiles></Linear></Creative></Creatives></InLine></Ad></VAST>',
    onload: function(){
      console.log('Player has been initalized and is now ready, we can now interact with the player');
      console.log('Video Duration: ' +player.getVideoLength());
      player.on('playing', function(){
        console.log('Playback has started');
      });
      player.on('timeupdate', function(){
        console.log('Playback time update | Current time: '+player.getCurrentTime());
      });
      player.on('ended', function(){
        console.log('Playback ended');
      });
    }
  });
};

//lazy load the Alchemy PLayer in....
;(function(){
  var d = document, s = d.createElement('script'), p = d.location.protocol;
  s.type = 'text/javascript';
  s.src = 'https://d.alcvid.com/tag-unit-player/56aa222809fa09b67a8b4568/56af7d61edfd09494e8b456f';
  var t = document.getElementsByTagName('head')[0];
  t.insertBefore(s, t.firstChild);
})();

//controls for hooking into the player - purpose of demo only...
$(function(){
  $('#play').on('click', function(){
    player.play();
  });
  $('#pause').on('click', function(){
    player.pause();
  });
  $('#mute').on('click', function(){
    player.mute();
  });
  $('#unmute').on('click', function(){
   ...