JSFiddle - React, Tailwind, and code Playground

by nocircleno

JavaScript

(function() {
        var videoEl, iFrame, iFrameDocument, iFrameWindow, smartPlayerConfig;

        var onVideoEnd = function(e) {
            // turn on next button
        }

        var onCustomSmartPlayerEvent = function(eventInfo) {
            if(eventInfo.category === "HTML5-Video" && eventInfo.action === "Video_Started") {
                // remove event listener once video has started.  Now the video tag is in the iframe document.
                smartPlayerConfig.useCustomEventTracking(false, undefined);

                // grab the video tag from the iframe document
                var videos = iFrameDocument.getElementsByTagName('video');
                if(videos.length > 0) {
                    videoEl = videos[0];

                    // add events you want to listen
                    videoEl.addEventListener("ended", onVideoEnd);
                }
            }
        }

        var onIFrameLoad = function(e) {
            iFrameDocument =  iFrame.contentDocument;
            iFrameWindow = iFrame.contentWindow;

            // grab the smart player configuration JS and use the custom event tracking to listen
            // for the user to press the big play button.  The video tag will be available then.
            smartPlayerConfig = iFrameWindow.TSC.playerConfiguration;
            smartPlayerConfig.useCustomEventTracking(true, onCustomSmartPlayerEvent);
        }

        function watchForIFrameLoadedEvent() {
            iFrame = document.getElementsByTagName("iframe")[0];
            iFrame.onload = onIFrameLoad;
        }

        watchForIFrameLoadedEvent();
    }());