Captivate HTML5 Module Youtube video player status

Question

We are using Adobe captivate to create HTML5 modules which we then host on our site. The desire is to get the player status from the videos. I.E. playing, paused, skipped, stopped.

If I put the video directly in the page using the instructions here:

https://developers.google.com/youtube/iframe_api_reference

no problems, video runs and I get my player status.

When I try to do the same with the captivate module I can't get my JS to run.

I'm mostly sure it's because I can't figure the ID of the element on the page. When I inspect it I get:

<div id="SlideVideo_2" class="cp-frameset" style="z-index: 0; display: block; left: 320px; top: 165px; width: 640px; height: 390px; transform: rotate(0deg);"></div>

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'wLlovxa3VJ0',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    alert(event.data);
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}

I've tried using SlideVideo_2 and getElementby ID with wildcards: getElementById() wildcard

The code above works for the youtube direct but not for the HTML5.

Thanks for the help.

score 0 · Answer 1 · answered Aug 28 '20 at 15:16

I've been able to get this to work. What I had to do is:

Within Captivate you can setup advanced interactions where you can add custom JS. From there I added in the script to send messages to the LRS for play, pause, etc.

We are making a template with custom controls so the reporting will be enabled for anyone who publishes with those templates.

score 0 · Answer 2 · answered Aug 28 '20 at 19:58

Little further expansion, the module was launched in an IFrame, so we couldn't reference any of the CP properties.

https://www.w3schools.com/jsref/prop_frame_contentdocument.asp

Once we referenced the IFrame contents we were able to get to the player controls.

Captivate HTML5 Module Youtube video player status

2 Answers2