JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<video id="video-5854481866001" data-account="4332409863001" data-player="ByGdadQZ2e" data embed="default" class="video-js" playsinline data-video-id="5854481866001" preload="metadata"></video>
<br>
<video id="video-5841850399001" data-account="4332409863001" data-player="ByGdadQZ2e" data embed="default" class="video-js" playsinline data-video-id="5841850399001" preload="metadata"></video>

<script>
	new Brightcove('4332409863001', 'ByGdadQZ2e', '5854481866001').loadBrightcove();
  new Brightcove('4332409863001', 'ByGdadQZ2e', '5841850399001').loadBrightcove();
</script>

JavaScript

class Brightcove {
    constructor (accountId, playerId, videoId) {
      window.console.log(`----- CLASS Brightcove -----`);
      this.accountId = accountId || '';
      this.playerId = playerId || '';
      this.videoId = videoId || '';
    }
    
    loadBrightcove () {
    	const that = this;
      window.console.log(`Test ${this.videoId}`)
      const bcScript = document.createElement('script');

      bcScript.src = `//players.brightcove.net/${this.accountId}/${this.playerId}_default/index.min.js`;
      bcScript.id = `bcScript`;
			
      // if (!document.getElementById('bcScript')) {
      	document.head.appendChild(bcScript);
      // }
      
      bcScript.onload = that.initBrightcove();
    }
    
    initBrightcove () {
      var brightcovePlayer = bc(`video-${this.videoId}`);
      window.console.log(`initBrightcove Player video-${this.videoId} ${brightcovePlayer}`);
      const bcPlayer = new BrightcoveFunctions(brightcovePlayer).tracking();
      // this.tracking(brightcovePlayer);
    }
  }
  
class BrightcoveFunctions {
	constructor (brightcovePlayer) {
  	window.console.log(`----- CLASS BrightcoveFunctions -----`);
		this.brightcovePlayer = brightcovePlayer || '';
  }
  
  tracking (brightcovePlayer) {
   	window.console.log(`Tracking ${this.brightcovePlayer}`);
  }
}