Spotlightr Advanced Embed Code

Simple React Hooks example. A timer that pauses when you hold the mouse button. Creates and uses a custom Hook.

by petarsubotic

HTML

<div id="app"></div>

CSS

.timer {
  padding: 20px;
  font-size: 40px;
}

React

function EmbedVideo () {
  const playerId='MTM0NDUzMA==';
  const videoHost= 'https://videos.cdn.spotlightr.com/';
  const iframeSrc = videoHost+"watch/"+ playerId;

  const vooPlayerReady=()=>{
     vooAPI(playerId, 'getDuration', null, getDurationCallback);
  }
  const play=()=>{
     vooAPI(playerId, 'play')
  }

  const pause=()=>{
     vooAPI(playerId, 'pause')
  }
  const getDurationCallback=(duration)=>{
     document.getElementById('durationDisplay').innerText=duration
  }
  React.useEffect(() => {

    const script = document.createElement('script');  
    script.src =videoHost+'/assets/spotlightr.js';

    document.body.appendChild(script);
    script.addEventListener('load',function(){
      document.addEventListener('vooPlayerReady', vooPlayerReady, false);

    })
    return () => {
      document.body.removeChild(script);
    }

  }, []);
  
   
   return (
    <div>
    <iframe allow="autoplay" className="video-player-container spotlightr" data-playerid={playerId} allowtransparency="true" style={{maxWidth:'100%'}} name="videoPlayerframe" allowfullscreen="true" src={iframeSrc} watch-type="" url-params="" frameborder="0" scrolling="no"> </iframe>    

      <button onClick={()=>{play()}}>play video</button>
      <button onClick={()=>{pause()}}>pause video</button>
      <p>Video duration is <span id="durationDisplay"></span></p>
      </div>
    )
}

ReactDOM.render(<EmbedVideo />, document.querySelector("#app"))