Skip to main content
Participant
July 20, 2022
Question

Captivate HTML5 Module Youtube video player status

  • July 20, 2022
  • 1 reply
  • 195 views

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 laser 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.

This topic has been closed for replies.

1 reply

OH_CP_Lover_&_Hacker
Inspiring
July 22, 2022

 My initial guess will be that you will need to addjust your JS code to address the proper window/frame where the video has been embeded onto the slide.  If you were to add your YouTube video via a WebObject and use YouTube embed code, it can easily pause and play using JS like this: document.getElementsByTagName("video")[0].pause(), document.getElementsByTagName("video")[0].play();

 

 

OH_CP_Lover_&_Hacker
Inspiring
July 22, 2022

Here are a couple of other possibly handy JS lines that folks might find intresting:

  • document.getElementsByTagName("video")[0].duration  // returns the duration of the video
  • document.getElementsByTagName("video")[0].paused  // returns true/false based on if the video is paused
  • document.getElementsByTagName("video")[0].ended  // returns true/false if the video has ended