如何使用 jQuery 停止 Vimeo 视频答案

【问题标题】：How to stop a Vimeo video with jQuery如何使用 jQuery 停止 Vimeo 视频
【发布时间】：2011-05-26 22:48:21
【问题描述】：

当我隐藏 YouTube 视频时，它会停止播放。但是，Vimeo 视频并非如此。还有其他方法可以停止 Vimeo 视频吗？

【问题讨论】：

您使用的是通用嵌入代码还是 Flash 嵌入代码？
带有 iframe 标签

【解决方案1】：

首先，向您的 iFrame 添加一个 ID。然后将此添加到您的 javascript 关闭窗口单击功能中：

var $frame = $('iframe#yourIframeId');

// saves the current iframe source
var vidsrc = $frame.attr('src');

// sets the source to nothing, stopping the video
$frame.attr('src',''); 

// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);

【讨论】：

其实这个适用于所有浏览器甚至ie7，关闭视频流畅！
添加 src 属性后，动画会跳转。

【解决方案2】：

我最近需要在 Bootstrap 模式关闭时暂停一个 Vimeo 视频。

Vimeo 视频嵌入在 iframe 中。

这对我有用：

$("#my-bootstrap-modal").on('hidden.bs.modal', function (e) {
    var div = document.getElementById("my-bootstrap-modal");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"method":"pause"}', '*');
});

【讨论】：

@johna：在 iframe 嵌入式 vimeo 视频中使用 postMessage 时，您是否参考了 vimeo 方法的 api 文档？
@j4v1，我找不到任何特定于 postMessage 的内容，除了暂停之外我不需要做任何事情，但我认为播放器参考将适用（但需要更改为使用 postMessage）：@ 987654321@
模态？模态对话框？
@PeterMortensen，你的问题是什么？与 Bootstrap 模态 (getbootstrap.com/docs/4.3/components/modal) 有什么关系？

【解决方案3】：

Vimeo 有a JavaScript API，允许您访问和调用视频播放器上的许多属性和方法（包括暂停视频和完全卸载视频）。他们还有一个API Playground 和一些examples on GitHub。

[编辑]

由于您提到您使用通用嵌入代码，以下是网站上的一些警告：

使用通用嵌入代码，与播放器交互的唯一方法是使用window.postMessage。 postMessage 是一个相对较新的开发，因此它仅适用于以下浏览器：Internet Explorer 8+、Firefox 3+、Safari 4+、Chrome 和 Opera 9+。

由于 postMessage 涉及的复杂性，我们编写了一个 JS 迷你库，可以为您完成所有繁重的工作！您可以在 downloads page 上找到它，或者您可以查看一些示例 below。

【讨论】：

Github uri 比较老，最好指向github.com/vimeo/player.js

【解决方案4】：

要恢复 SRC 属性，请在清除之前使用以下内容：

var source = $('iframe#yourVideoId').attr('src');

接下来，清除SRC属性：

$('iframe#yourVideoId').attr('src', '');

回调之前的 SRC 属性：

$('iframe#yourVideoId').attr('src', source);

【讨论】：

$('iframe#yourVideoId').attr('src','about:blank');更准确。

【解决方案5】：

    var vidUrl = $("iframe#video-frame").attr('src');


    //Basically stops and starts the video on modal open/close
    $('#video').on('hidden.bs.modal', function (e) {
        $("iframe#video-frame").attr('src','');
    });

    $('#video').on('show.bs.modal', function (e) {
        $("iframe#video-frame").attr('src', vidUrl);
    })

【讨论】：

【解决方案6】：

David 的另一个答案...您可以使用 jQuery 清除 iFrame 的 SRC 属性。

$('iframe#targetID').attr('src','');

我将它与 Vimeo 视频和灯箱效果一起使用。当灯箱再次触发时，我将视频 URL 添加回 iFrame SRC，然后再显示。

【讨论】：

【解决方案7】：

使用 Vimeo JavaScript API，可以做到：

player.unload()

https://github.com/vimeo/player.js#unload-promisevoid-error

【讨论】：