jQuery单击时如何停止Vimeo视频答案

【问题标题】：jQuery how to stop Vimeo video when clickjQuery单击时如何停止Vimeo视频
【发布时间】：2012-05-01 17:43:47
【问题描述】：

基本上我尝试这样使用：

<iframe src="http://player.vimeo.com/video/40977539?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<a href="#">STOP</a>

$('a').click(function() {
   alert('stoped');
   froogaloop.api('unload');
});

【问题讨论】：

标签： jquery jquery-plugins vimeo

【解决方案1】：

最好的方法是使用Vimeo API：

例子：

<script>
    var iframe = $('.vimeo-iframe').get(0);
    var player = new Vimeo.Player(iframe);
    player.pause();
    //player.play();
</script>

【讨论】：

【解决方案2】：

你错过了获取 vimeo 视频的 id：

var iframe = $('#vimeo-player')[0];
var player = $f(iframe);
player.api('unload');

示例：http://jsfiddle.net/joan_r/dutzh512/

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<style>
#play,#pause,#stop{
    width:60px;
    margin:5px;
    text-align: center;
    border: solid;
    cursor:pointer;
}
</style>
</head>
<body>
<iframe id="vimeo-player" src="//player.vimeo.com/video/76979871" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="play">[PLAY]</div>
<div id="pause">[PAUSE]</div>
<div id="stop">[STOP]</div>
<script>
    $('#play').click(function() {
        var iframe = $('#vimeo-player')[0];
        var player = $f(iframe);
        player.api('play');
    });
    $('#pause').click(function() {
        var iframe = $('#vimeo-player')[0];
        var player = $f(iframe);
        player.api('pause');
    });
    $('#stop').click(function() {
        var iframe = $('#vimeo-player')[0];
        var player = $f(iframe);
        player.api('unload');
    });
</script>
</body>
</html>

【讨论】：

【解决方案3】：

我不知道完成这个跨浏览器的“好”或“正确”方法。
Youtube 的 JavaScript API 也失败了。

但是这种方法是可靠的并且确实有效。
基本上，它会杀死 <iframe> 并重建它。

$('a').click(function() {
  alert('stoped');
  vimeoWrap = $('#vimeoWrap');
  vimeoWrap.html(vimeoWrap.html());
});

View at JSFiddle

【讨论】：

它不再工作了。它只工作一次。只有在它工作后再次刷新页面。我需要一次又一次地点击播放并停止。它会自动运行而无需重新加载页面。
你用的是什么浏览器？它在 Chrome 中反复运行。

【解决方案4】：

如果您只需要像这样播放或暂停视频使用：

var iframe = $('#vimeo-player')[0];
var player = $f(iframe);

$('#stop').click(function() {
    alert('stoped');
    player.api('pause');
});


$('#play').click(function(){
    alert('play');
    player.api('play');
})

和标记：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<iframe id="vimeo-player" src="http://player.vimeo.com/video/40977539?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<a id="stop" href="#">STOP</a>
<a id="play" href="#">PLAY</a>

http://jsfiddle.net/zimm/8CV2S/14/

【讨论】：

虽然很老的帖子，但很好地满足了我的目的。谢谢。
Vimeo 最近似乎不再支持这一点。有新的 API 可以使用吗？
终于找到了我想要的答案！谢谢！
很好的答案，它拯救了我的一天！不过我有一个问题，a.vimeocdn.com/js/froogaloop2.min.js ->（您的连接不是私有的）是 vimeo 的官方 CDN 吗？我检查了他们的GitHub，上面写着：player.vimeo.com/api/player.js、This Image 和This Image 让我偏执，而且他们没有 SSL？！我猜代码看起来不错......但我看到有人扫描脚本Ref！

【解决方案5】：

如果您使用 Vimeo 更新的 API 代码，那么您可以像下面这样：http://jsfiddle.net/deshg/8CV2S/。您可以看到停止按钮现在向您发出警报，然后视频被卸载。

干杯！

【讨论】：