Question

我正在wordpress上创建这个网页，其中包含来自youtube的一些帖子中的视频，出于标记目的，我需要在每次点击每个视频时播放。我已经浏览了网页，但我能找到的是，因为这些视频是在主域外的iframe中，所以不可能从内部捕获一些内容，例如点击。

有什么方法可以在不改变网站上的任何内容的情况下抓住播放按钮的点击次数？来自JS。

提前致意并表示感谢。

Answer 1

您可以使用youtube的js API

在iframe中捕获一些事件

这就是你要做的事情：

1）。在页面中加载Player API

<script src="http://www.youtube.com/player_api"></script>

2）。在jsapi中启用iframe作为尾随参数（enablejsapi），例如

<iframe id="myIframe" src="http://www.youtube.com/embed/opj24KnzrWo?enablejsapi=1&autoplay=0" width="420" height="280" frameborder="0"></iframe>

...还通知我们在iframe添加了 ID 。

3）。创建3个功能：

A）。 onPlayerReady：

您可以在此处检测视频何时加载并准备播放。在这里你可以实际启动视频等。

function onPlayerReady(event) {
    // video is ready, do something
    event.target.playVideo();
}

B）。 onPlayerStateChange：

您可以在此处检测触发事件的内容：

function onPlayerStateChange(event) {
    console.log(event.data); // event triggered
    // e.g. end of video
    if (event.data === 0) {
        // end of video: do something here
    }
}

当您click 播放或暂停时，会触发事件。然后，您可以决定要执行的操作，包括推送跟踪事件等。

这是每个事件的返回值列表：

-1 – unstarted
 0 – ended
 1 – playing
 2 – paused
 3 – buffering
 5 – video cued

请参阅documentation了解有关事件

的更多信息

C）。 onYouTubePlayerAPIReady：

这是您实际初始化API并将事件绑定到其他函数的位置：

function onYouTubePlayerAPIReady() {
    var id = document.getElementById("myIframe").getAttribute("id");
    var player = new YT.Player(id, {
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
} // youtube API ready

参见 JSFIDDLE

获取youtube播放器的视频播放

1 个答案: