如何使用 jQuery 停止 Vimeo 视频

Question

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

Answer 1

首先，将 ID 添加到您的 iFrame。然后将其添加到您的 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);

Answer 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"}', '*');
});

Answer 3

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

[编辑]

既然您提到您使用通用嵌入代码，那么以下是该网站的一些注意事项：

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

由于 postMessage 涉及的复杂性，我们编写了一个 JS 迷你库来为您完成所有艰苦的工作！您可以在下载页面上找到它，也可以查看一些示例下面。

Answer 4

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

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

接下来，SRC 属性清除：

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

回调之前的 SRC 属性：

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

Answer 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);
    })

Answer 6

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

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

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

Answer 7

使用 Vimeo JavaScript API，可以通过以下方式完成：

player.unload()

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

Answer 8

您必须删除并重新安装 src。

    $('#helpVideo').on('hidden.bs.modal', function () {
        video_src = $('iframe').attr('src')
        $('iframe').attr('src',video_src)
    })