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!');
        });

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

        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")是旧语法，而新的synax是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版本，分别指向旧版本和新版本的链接：

<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视频，则可能会将ID归因于您的vimeo iframe，例如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未检测到播放事件

1 个答案: