Captivate HTML5 Module Youtube 视频播放器状态答案

【问题标题】：Captivate HTML5 Module Youtube video player statusCaptivate HTML5 Module Youtube 视频播放器状态
【发布时间】：2020-12-09 05:29:39
【问题描述】：

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

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

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

没问题，视频运行，我得到了我的播放器状态。

当我尝试对 captivate 模块执行相同操作时，我无法让我的 JS 运行。

我很确定这是因为我无法确定页面上元素的 ID。当我检查它时，我得到：

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

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。

感谢您的帮助。

【问题讨论】：

标签： javascript html dom youtube adobe-captivate

【解决方案1】：

我已经能够让它工作。我必须做的是：

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

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

【讨论】：

【解决方案2】：

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

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

一旦我们引用了 IFrame 内容，我们就可以访问播放器控件。

【讨论】：