How to stop a Vimeo video with JQuery

问题

When I hide a youtube video, it stops playing. However, this is not the case for Vimeo videos. Is there another way to stop a Vimeo video?

回答1:

First, add an ID to your iFrame. Then add this to your javascript close window click function:

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

回答2:

Vimeo has a JavaScript API that allows you to access and invoke many properties and methods on the video player (including pausing the video and also unloading it completely). They also have an API Playground and some examples on GitHub.

[Edit]

Since you mention that you use the Universal Embed Code, here are some caveats from the web site:

With the Universal Embed Code, the only way to interact with the player is by using window.postMessage. postMessage is a relatively new development, so it's oly available in the following browsers: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, and Opera 9+.

Because of the complexities involved with postMessage, we've written a JS mini-library that does all the hard work for you! You can find it on the downloads page or you can see some examples below.

回答3:

to restore the SRC attribute use the following before clearing:

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

next SRC attribute clear:

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

callback previous SRC attribute:

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

回答4:

I recently needed to pause a Vimeo video that was inside a Bootstrap modal when the modal was closed.

The Vimeo video was embedded in an iframe.

This is what worked for me:

$("#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"}', '*');
});

回答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:

Another answer along the lines of David's...you can use jQuery to clear the SRC attribute of the iFrame.

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

I'm using this with a Vimeo video and a lightbox effect. When the lightbox is triggered again, I add the video URL back to the iFrame SRC before showing it.

回答7:

Try using vimeo player API: http://developer.vimeo.com/player/js-api#methods

Remember to turn API on. eg: http://player.vimeo.com/video/VIDEO_ID?api=1

回答8:

Using Vimeo javascript API it can be done with

player.unload()

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

回答9:

I used jQuery to remove the iframe from the DOM.

来源：https://stackoverflow.com/questions/6145990/how-to-stop-a-vimeo-video-with-jquery

标签

javascript

jquery

vimeo