获取 youtube 播放器的视频播放答案

【问题标题】：Get video play of youtube player获取 youtube 播放器的视频播放
【发布时间】：2015-02-16 17:08:50
【问题描述】：

我正在 wordpress 上创建此网页，其中一些帖子中有来自 youtube 的视频，出于标记目的，我需要在每次有人点击播放每个视频时捕获。我浏览了网络，但我能找到的只是，由于这些视频位于主域之外的 iframe 上，因此不可能从其中捕获某些内容，例如点击。

有什么方法可以在不更改网站上的任何内容的情况下捕捉播放按钮上的这种点击？来自JS。

提前致谢。

【问题讨论】：

developers.google.com/youtube/iframe_api_reference

标签： javascript jquery html wordpress youtube

【解决方案1】：

您可以使用 youtube 的 js API 在iframe 中捕获一些事件

这是你必须做的：

1)。在您的页面中加载Player API

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

2)。在 iframe 中启用 jsapi 作为尾随参数 (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 个函数：

一）。 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

【讨论】：