JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id='player'></div>

<button id='play'>play</button>
<button id='pause'>pause</button>
<button id='mute'>mute</button>
<button id='enable_cc'>enable cc</button>
<button id='disable_cc'>disable cc</button>

CSS

button {
  width: 80px;
  height: 28px;
  border: 1px solid silver;
  background-color: white;
}

JavaScript

const options = { 
  width: 640,
  height: 380,
  player: 'amazon_live',
//  contentId: '...', 
//  customerId: '...'
  video: 'v123802735',
};
const player = new Twitch.Player('player', options);

// add events
player.addEventListener(Twitch.Player.READY, () => {
  console.log('ready!');
});

player.addEventListener(Twitch.Analytics.VIDEO_PLAY, payload => {
  console.log('VIDEO PLAY ANALYTICS:', payload);
});

player.addEventListener(Twitch.Analytics.MINUTE_WATCHED, payload => {
  console.log('MINUTE WATCHED ANALYTICS:', payload);
});

player.addEventListener(Twitch.Analytics.BUFFER_EMPTY, payload => {
  console.log('BUFFER EMPTY ANALYTICS:', payload);
});

player.addEventListener(Twitch.Analytics.VIDEO_ERROR, payload => {
  console.log('VIDEO ERROR ANALYTICS:', payload);
});

// enable controls
const click = (id, handler) => {
  const button = document.getElementById(id);
  if (button) {
    button.addEventListener('click', handler);
  }
};

click('play', () => player.play());
click('pause', () => player.pause());
click('mute', () => player.setMuted(!player.getMuted()));
click('enable_cc', () => player.enableCaptions());
click('disable_cc', () => player.disableCaptions());