我正在尝试使用 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 中获得了代码,所以不确定我做错了什么:
最佳答案
这里好像有两个问题。
首先: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()
方法有一个 promise .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 视频,您可能会为您的 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,如果这里还有其他事情):
关于javascript - Vimeo API 未检测到播放事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41521855/