Vimeo API 未检测到播放事件

Question

我正在尝试使用 hte vimeo js api 检测播放按钮的点击。这是我的代码：

html:

<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

和 JS：

        var iframe = document.getElementById('video');
        var player = $f(iframe);

        player.on('play', function() {
            console.log('played the video!');
        });

目前我没有在控制台中记录任何内容。我确实有另一个使用 Vimeo API 的功能，稍后在 DOM 中似乎工作正常：

        jQuery("body").on("click",".watch-vid-cta",function(){
              player.api("play");
        });

我直接从他们的 API 那里得到了代码，所以不确定我做错了什么：

https://github.com/vimeo/player.js

Answer 1

这里好像有两个问题

第一：vimeo 最近发布了新的 api (2016)，它与前一个不兼容。您提供的代码是两者的混合 api，player.api("play") 是旧语法，而新语法是 player.play()。当您的第二个函数正在运行时，我假设您使用的是旧的 api（称为 froogaloops）。 vimeo 的 github 页面包含您可能需要迁移的所有说明，而且超级简单。

第二：在新的 api 中，您似乎混合了事件侦听器 player.on('play', function() {} 在播放播放器时执行某些操作和 play() 方法，用于播放播放器。

使用新的 api，您的代码可能如下所示：

html :

<button type="button" id="playButton">Play</button>

那么您需要在您的页面中包含 api

<script src="https://player.vimeo.com/api/player.js"></script>

最后是你的 js：

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

function vimeoPlay(){
    player.play().then(function(){
    })
    .catch(function(error) {
        switch (error.name) {
            case 'PasswordError':
                break;
            case 'PrivacyError':
                break;
            default:
                break;
        }
    });
}

document.getElementById("playButton").onclick = function (){vimeoPlay()}

此处 player.play() 方法有一个承诺 .then(function{})，这使您可以在播放器播放后执行某些操作，因此每次调用 vimeoPlay 函数时只需单击一次本例中的按钮。

希望对您有所帮助

编辑：

关于您的评论，我相信您遇到的是第一个问题。

如果包含 player.api("play") 的第二个函数有效，则可能意味着您正在使用旧的 api (froogaloops) 和新的 api (2016) 一样成为 player.play().

如果是这样，您不能指望 player.on('play', function() {console.log('played the video!');}); 能正常工作，因为它是新 api 的语法。

你应该仔细检查你使用的是哪个版本的api，link到旧的和新的分别是：

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
    //versus
<script src="https://player.vimeo.com/api/player.js"></script>

如果您确实希望收听播放活动，那么您可以尝试使用新的 api

<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript">
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
    console.log('played the video!');
});
</script>

我强调你对嵌入视频的方式与我的方式之间的差异的关注，你不应该用新的 api 添加 ?api=1 :

<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1"></iframe>
    //versus
<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe>

以及你和我设置变量的方式之间的区别：

var iframe = document.getElementById('video');
var player = $f(iframe);
    //versus
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

如果您在同一页面上有多个 vimeo 视频，您可能会为您的 vimeo iframe 分配一个 id，例如 vimeoPlayer1 和 vimeoPlayer2 并写

<iframe id="vimeoPlayer1" src="https://player.vimeo.com/video/21777784"></iframe>
<iframe id="vimeoPlayer2" src="https://player.vimeo.com/video/21777784"></iframe>

var vPlayer1 = document.getElementById("vimeoPlayer1");
var player1 = new Vimeo.Player(vPlayer1)

var vPlayer2 = document.getElementById("vimeoPlayer2");
var player2 = new Vimeo.Player(vPlayer2)

最后，您可以通过将 player.api("play") 替换为 player.play() 来升级您的第二个功能（但如果这里还有其他问题，我对 jQuery 感到不舒服）：

Vimeo API 未检测到播放事件

Vimeo API not detecting play event

javascript

vimeo

vimeo-api