web-dev-qa-db-fra.com

Comment arrêter une vidéo Vimeo avec JQuery

Lorsque je cache une vidéo youtube, la lecture s'arrête. Cependant, ce n'est pas le cas pour les vidéos Vimeo. Existe-t-il un autre moyen d'arrêter une vidéo Vimeo?

javascriptjqueryvimeo
35
Justin Meltzer

Tout d'abord, ajoutez un ID à votre iFrame. Ajoutez ensuite ceci à votre fonction de clic de la fenêtre de fermeture 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);
53
Deborah

Vimeo a ne API JavaScript qui vous permet d'accéder à de nombreuses propriétés et méthodes sur le lecteur vidéo et de les invoquer (y compris la pause de la vidéo et le déchargement complet). Ils ont également un API Playground et certains exemples sur GitHub .

[Éditer]

Puisque vous mentionnez que vous utilisez le code d'intégration universel, voici quelques mises en garde du site Web:

Avec le code d'intégration universel, la seule façon d'interagir avec le lecteur est d'utiliser window.postMessage . postMessage est un développement relativement nouveau, il est donc uniquement disponible dans les navigateurs suivants: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome et Opera 9+.

En raison de la complexité de postMessage, nous avons écrit une mini-bibliothèque JS qui fait tout le travail pour vous! Vous pouvez le trouver sur la page de téléchargements ou vous pouvez voir quelques exemples ci-dessous .

11
Michelle Tilley

pour restaurer l'attribut SRC, utilisez ce qui suit avant d'effacer:

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

attribut SRC suivant effacé:

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

rappel de l'attribut SRC précédent:

$('iframe#yourVideoId').attr('src',source);
6
pirios
    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);
    })
4
user2194405

Une autre réponse dans le sens de celle de David ... vous pouvez utiliser jQuery pour effacer l'attribut SRC de l'iFrame.

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

J'utilise ceci avec une vidéo Vimeo et un effet lightbox. Lorsque la lightbox est à nouveau déclenchée, j'ajoute l'URL de la vidéo à l'iFrame SRC avant de l'afficher.

3
Nathan J

J'ai récemment eu besoin de mettre en pause une vidéo Vimeo qui était à l'intérieur d'un modal Bootstrap lorsque le modal a été fermé.

La vidéo Vimeo a été intégrée dans un iframe.

C'est ce qui a fonctionné pour moi:

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

Essayez d'utiliser l'API du lecteur vimeo: http://developer.vimeo.com/player/js-api#methods

N'oubliez pas d'activer l'API. par exemple: http://player.vimeo.com/video/VIDEO_ID?api=1

1
Muzahid

En utilisant l'API javascript Vimeo, cela peut être fait avec

player.unload()

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

0
trushkevich