web-dev-qa-db-fra.com

Mettre en sourdine une vidéo vimeo intégrée

Sur un site Web que je construis, j'ai une vidéo vimeo intégrée. Le client doit évidemment garder le son sur la vidéo pour les personnes qui le trouvent sur vimeo. Cependant, pour son site Web, le son est tout simplement agaçant. Donc, je dois trouver un moyen de couper le son dans le code pour l'intégration. Je l'ai googlé mais je n'arrive pas à trouver quelque chose de lisible. Comme vous pouvez le voir dans mon code ci-dessous, j'ai utilisé la commande autoplay dans le lien. J'espérais pouvoir faire la même chose pour couper le son.

    <iframe src="http://player.vimeo.com/video/4415083?  title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Merci

htmlvimeovimeo-apimutevimeo-player
22
DanielNolan

Au cas où cela aiderait quelqu'un, Vimeo a ajouté un paramètre 'arrière-plan' pour l'intégration de vidéos, qui lit automatiquement les vidéos en mode silencieux. Dans certains cas, cela peut être utile lorsque les gens veulent couper des vidéos - voici leur exemple:

<iframe src="https://player.vimeo.com/video/76979871?background=1" 
    width="500" height="281" frameborder="0" webkitallowfullscreen 
    mozallowfullscreen allowfullscreen></iframe>
34
toby1kenobi

vous allez utiliser setVolume api dans votre vimeo .. player.api('setVolume', 0);it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
        <iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1&player_id=vimeo_player" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        <script>
        var iframe = $('#vimeo_player')[0],
            player = $f(iframe),
            status = $('.status');

            player.addEvent('ready', function() {
                player.api('setVolume', 0);
            });
        </script>
19
gadss

J'ai essayé les exemples dans les réponses sans succès. Après avoir examiné la documentation, j'ai remarqué qu'il manquait le paramètre &player_id=IFRAME_ID. Peut-être que quelque chose a changé dans l'API Vimeo, de toute façon l'exemple suivant fonctionne pour moi:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="//player.vimeo.com/video/4415083?api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script>
$(function() {
    var vimeo_iframe = $('#vimeo_player')[0];
    var player = $f(vimeo_iframe);

    player.addEvent('ready', function() {
        player.api('setVolume', 0);
    });
});
</script>

12
Jordy

On dirait que Vimeo fournit une bibliothèque mise à jour, et la syntaxe de l'API est légèrement différente de l'ancienne (Froogaloop). Voici comment mettre en sourdine une vidéo intégrée avec JS:

<!--Add the id attr to the iframe tag to use as a selector-->
<iframe id="embeddedVideo" src="http://player.vimeo.com/video/4415083? title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<!--Include the Vimeo API Library-->
<script src="https://player.vimeo.com/api/player.js"></script>

<!--Select and manipulate your video-->
<script type="text/javascript">
    //Select the #embeddedVideo element
    var video = document.getElementById('embeddedVideo');

    //Create a new Vimeo.Player object
    var player = new Vimeo.Player(video);

    //When the player is ready, set the volume to 0
    player.ready().then(function() {
        player.setVolume(0);
    });
</script>

J'espère que cela aidera tous ceux qui utilisent la nouvelle bibliothèque. La documentation est à vimeo/player.js

11
Cafe Coder

Puisque la plupart des réponses ici se réfèrent à l'ancienne API de Vimeo. Voici le moyen le plus simple avec la nouvelle api. Vous pouvez inclure vimeo player.js à partir de leur CDN ou le télécharger ou l'inclure à partir de npm. 

<script src="https://player.vimeo.com/api/player.js"></script>

ou 

npm install @ vimeo/player

alors vous pouvez faire ce qui suit. 

    <script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.setVolume(0);
  </script>

c'est tout. Et si vous utilisez 2+ angulaire, 

import * as Vimeo from '@vimeo/player';

const iframe = e.target;
const player = new Vimeo(iframe);
player.setVolume(0);

ici e.target est $ event qui serait passé du modèle. Cela pourrait probablement être un événement iframe (load). Ou peut-être que vous pouvez utiliser jquery pour sélectionner iframe. 

8
dilantha111

Pour les membres non payants

Vous devez simplement ajouter le paramètre muted. Par exemple.:

<iframe src="https://vimeo.com/48400332?autoplay=1&loop=1&muted=1" ></iframe>

Pour les membres payants

Selon Vimeo, le paramètre background est uniquement pris en charge pour les vidéos hébergées par des membres rémunérés.

Source: https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos

6
Meydjer Windmüller

** Voici ma solution: http://jsfiddle.net/jakeoblivion/phytdt9L/5/

(Vous aurez besoin de vos propres icônes de lecture/pause pour activer/désactiver le son.)

  //load video muted
  var video = $("#myvideo");
  video.vimeo("play");
  video.vimeo("setVolume", 0);

    //toggle play/pause
  $('#play-pause').click(function() {
    $(this).toggleClass('play');
    if ($(this).hasClass('play')) {
      //pause video
      video.vimeo("pause");
      $(this).css('background', 'pink');
    } else {
      //unpause video
      video.vimeo("play");
      $(this).css('background', 'blue');
    }
  });

  //toggle mute/unmute
  $('#mute-unmute').click(function() {
    $(this).toggleClass('mute');
    if ($(this).hasClass('mute')) {
      //unmute video
  video.vimeo("setVolume", 1);
      $(this).css('background', 'green');

    } else {
      //mute video
  video.vimeo("setVolume", 0);
      $(this).css('background', 'red');
    }
  });

J'ai passé des années à essayer et rien ne semblait marcher. 

Je voulais juste que la lecture automatique Vimeo soit coupée (volume 0) avec de simples commandes Lecture/Pause Mute/Unmute, au lieu de celles par défaut. (n'hésitez pas à utiliser des icônes au lieu des couleurs temporaires que je mets).

(Si vous voulez rajouter les contrôles par défaut sans les masquer, supprimez "? background = 1". Par défaut, background = 1 définit video.vimeo ("setVolume", 0) et masque les contrôles. charge sans le fond = 1 set).

Remarque: .__ "Vous devrez exécuter le logiciel sur un serveur Web au lieu d’ouvrir le fichier directement dans votre navigateur. Les restrictions de sécurité JS empêchent l’API de fonctionner lorsqu’il est exécuté localement."

2
jake

@Gadss answer fonctionne très bien, mais j’ai constaté que vous deviez mettre à jour le iframe src pour inclure l’activation de l’API Vimeo. Il suffit d'inclure api = 1 après l'identifiant vimeo.

J'ai également constaté que cela ne fonctionnait pas parfois sur Safari pour une raison quelconque.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
    <iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?api=1&title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <script>
    var iframe = $('#vimeo_player')[0],
        player = $f(iframe),
        status = $('.status');

        player.addEvent('ready', function() {
            player.api('setVolume', 0);
        });
    </script>
2
jonnglass
<iframe src="http://player.vimeo.com/video/4415083?muted=1;  title=0;byline=0;portrait=0;color=d01e2f;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

vous pouvez simplement donner "mis en sourdine = 1" pour que la vidéo soit mise en sourdine ... chrome autoriser la lecture automatique des vidéos mises en sourdine

1
Bala

C'est la seule façon dont cela a fonctionné pour moi: http://jsfiddle.net/87dsjL8q/108/

var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );

 player.addEvent('ready', function() {
     player.api('setVolume', 20); 
 });
1
Pavelescu Razvan

J'ai trouvé un moyen de le faire. Vous démarrez la vidéo en mode muet pour qu’elle se lance automatiquement, puis le premier timeupdate vous réglez le volume sur 1.

var options = {
    id: 'video_id_here',
    width: 640,
    loop: false,
    muted: true,
    autoplay: true
};

var player = new Vimeo.Player('vimeo', options);

player.setVolume(0);

player.on('timeupdate', set_autoplay_volume );

function set_autoplay_volume(){
    player.setVolume(1);
    player.off('timeupdate', set_autoplay_volume );
}
0
Roland Murg