JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<script src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience1094799379001" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="480" />
  <param name="height" value="270" />
  <param name="playerID" value="1556072032001" />
  <param name="playerKey" value="AQ~~,AAAA5LSvUWE~,ofAvgRd2dY4vmt0EGJ7OaSLIDTy-VSXo" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="forceHTML" value="true" />
  <param name="includeAPI" value="true" />
  <param name="templateLoadHandler" value="onTemplateLoaded" />
  <param name="dynamicStreaming" value="true" />
  <param name="@videoPlayer" value="983529130001" />
</object>

<script>
var player, modVP, modCon, modExp;

function onTemplateLoaded(experienceID) {
    player = brightcove.api.getExperience(experienceID);
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    modCon = player.getModule(brightcove.api.modules.APIModules.CONTENT);
    modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
    modExp.addEventListener(brightcove.api.events.ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}

function onTemplateReady() {
    modVP.addEventListener(brightcove.api.events.MediaEvent.STOP, function(video) {
      if(video.duration === video.position) {
            modVP.loadVideoByID("1094698378001");
        }
    });
}</script>