吸引人的HTML5模块Youtube视频播放器状态

问题描述

我们正在使用Adobe Captivate创建HTML5模块，然后将其托管在我们的网站上。希望从视频中获得播放器状态。即播放，暂停，跳过，停止。

如果我按照此处的说明将视频直接放在页面中：

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

没问题，视频开始播放，我就获得了播放器状态。

当我尝试使用引人入胜的模块执行相同操作时，我无法运行JS。

我几乎可以肯定这是因为我无法计算页面上元素的ID。当我检查它时，会得到：

<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();
}

我尝试将SlideVideo_2和getElementby ID与通配符一起使用： getElementById() wildcard

上面的代码适用于youtube direct，但不适用于HTML5。

感谢您的帮助。

解决方法

我已经能够使它起作用。我要做的是：

在Captivate内，您可以设置高级交互，可以在其中添加自定义JS。从那里，我添加了脚本以将消息发送到LRS以进行播放，暂停等。

我们正在制作带有自定义控件的模板，这样，使用这些模板进行发布的任何人都可以启用报告。

进一步扩展后，该模块在IFrame中启动，因此我们无法引用任何CP属性。

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

一旦我们引用了IFrame内容，便可以进入播放器控件。

dom html javascript