Vimeo API 未检测到播放事件 [英] Vimeo API not detecting play event

问题描述

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

I'm trying to detect a click of the play button using hte vimeo js api. Here is my code:

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 中的函数，它似乎工作正常:

At the moment i'm not getting anything logged in the console. I do have another function using the Vimeo API later down in the DOM which seems to be working fine:

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

我直接从他们的 API 中获取了代码，所以不确定我做错了什么:

I got the code straight form their API so not sure what I could be doing wrong:

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

推荐答案

这里好像有两个问题.

第一:vimeo最近发布了新的api(2016)，与之前的不兼容.您提供的代码是这两种 API 的混合，player.api("play") 是旧语法，而新语法是 player.play().当您的第二个功能正在运行时，我假设您使用的是旧的 api(称为 froogaloops).vimeo 的 github 页面包含您可能需要迁移的所有说明，而且非常简单.

First : vimeo has released it's new api (2016) recently, and it's not compatible with the former one. The code you provided is a mix of the two api, player.api("play") is the old syntax, while the new synax is player.play(). As you second function is working, I would assume that you're using the old api (known as froogaloops). The github page of vimeo contains all the explanation you may nedd to migrate and it's super easy.

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

Second : within the new api, it seems that you mixed the event listener player.on('play', function() {} whitch do something when the player is played and the play() method, use to play the player.

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

With the new api your code might look like this :

html:

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

那么你需要在你的页面中包含这个api

then you need to include the api in your page

<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 函数时只调用一次，在这种情况下通过单击按钮.

Here the player.play() method has a promise .then(function{}), this enable you to do something once the player is played, and thus only once every time you call the vimeoPlay function, by clicking on the button in this case.

希望能帮到你

关于您的评论，我相信您正面临着第一个问题.

regarding your comment, I belive that you are facing the first issue.

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

If your second function, which contains player.api("play") works, it probably means that you are using the old api (froogaloops) as with the new api (2016) it would be player.play().

如果是这样，您不能期望 player.on('play', function() {console.log('played the video!');}); 照原样工作新 api 的语法.

If so, you can't expect player.on('play', function() {console.log('played the video!');}); to work as it is the syntax of the new api.

你应该仔细检查你使用的是哪个版本的api，分别是旧版本和新版本的链接:

You should double check which version of the api you are using, the link to the old and the new ones are respectively :

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

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

If your wish is indeed to listen to a play event then you may try this with the new 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>

以及你和我设置变量的方式之间的差异:

and toward the difference between the way you set your variables and I do:

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 并编写

If you have multiple vimeo video on the same page you may of couses attribute an id to your vimeo iframes, for instance vimeoPlayer1 and vimeoPlayer2 and write

<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 不满意，如果这里还有其他事情发生):

---

Finally you may upgrade you second function by replacing player.api("play") by player.play() (but I'm not confortable with jQuery if there is something else going on here):

这篇关于Vimeo API 未检测到播放事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！