wake-up-neo.com

Stummschalten eines eingebetteten Vimeo-Videos

Auf einer Website, die ich baue, habe ich ein Vimeo-Video eingebettet. Der Kunde muss den Ton auf dem Video offensichtlich für Leute behalten, die ihn auf vimeo finden. Für ihre Website ist der Sound jedoch einfach ärgerlich. Ich muss also einen Weg finden, um das Audio im Code für das Einbetten stummzuschalten. Ich habe es gegoogelt, scheint aber nichts lesbares zu finden. Wie Sie in meinem Code unten sehen können, habe ich den Autoplay-Befehl innerhalb des Links verwendet, von dem ich hoffte, ich könnte das Geräusch stummschalten.

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

Vielen Dank

22
DanielNolan

Falls es jemandem hilft, hat Vimeo einen 'Hintergrund'-Parameter hinzugefügt für das Einbetten von Videos, die automatisch Videos automatisch einspielen. In manchen Fällen ist dies nützlich, wenn Leute Videos stummschalten möchten. Dies ist ihr Beispiel:

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

sie werden setVolume api in Ihrem Vimeo verwenden. player.api('setVolume', 0); es wird so sein ...

<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

Ich habe die Beispiele in den Antworten ohne Erfolg ausprobiert. Nach einem Blick in die Dokumentation ist mir aufgefallen, dass der Parameter &player_id=IFRAME_ID fehlt. Vielleicht hat sich in der Vimeo-API etwas geändert, trotzdem funktioniert das folgende Beispiel für mich:

<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

Es scheint, als würde Vimeo eine aktualisierte Bibliothek bereitstellen, und die API-Syntax unterscheidet sich ein wenig von der alten (Froogaloop). So schalten Sie ein eingebettetes Video mit JS stumm:

<!--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>

Hoffe, das hilft jedem, der die neue Bibliothek benutzt. Dokumentation ist unter vimeo/player.js

11
Cafe Coder

Da sich die meisten Antworten hier auf Vimeos alte API beziehen. Hier ist der einfachste Weg mit der neuen API. Sie können vimeo player.js von ihrem CDN einbinden oder herunterladen oder von npm herunterladen. 

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

oder 

npm install @ vimeo/player

dann kannst du folgendes tun. 

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

    player.setVolume(0);
  </script>

das ist es. Und wenn Sie Winkel 2+ verwenden, 

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

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

hier ist e.target $ event, das von der Vorlage übergeben wird. Wahrscheinlich könnte es sich um ein iframe (load) -Ereignis handeln. Oder Sie können Jquery verwenden, um Iframe auszuwählen. 

8
dilantha111

Für nicht zahlende Mitglieder

Sie müssen lediglich den Parameter muted hinzufügen. Z.B.:

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

Für zahlende Mitglieder

Laut Vimeo wird der Parameter backgroundnur für Videos unterstützt, die von bezahlten Mitgliedern gehostet werden.

Quelle: https://help.vimeo.com/hc/de-de/articles/115004485728-Autoplaying-und-Schleifen-Bettvideos

6

** Hier ist meine Lösung: http://jsfiddle.net/jakeoblivion/phytdt9L/5/

(Sie benötigen Ihre eigenen Symbole für Wiedergabe/Pause/Stummschaltung/Stummschaltung)

  //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');
    }
  });

Ich habe es lange versucht und nichts schien zu funktionieren. 

Ich wollte nur ein Vimeo-Autoplay (Lautstärke 0) mit einfachen Play/Pause-Stummschaltung/Unmute-Steuerelementen anstelle der Standardeinstellungen stummschalten. (Sie können statt der temporären Farben, die ich einsetze, Symbole verwenden.).

(Wenn Sie die Standardsteuerelemente zurücksetzen möchten, aber stummgeschaltet bleiben möchten, entfernen Sie "? background = 1". Standardmäßig wird mit background = 1 video.vimeo ("setVolume", 0) und Steuerelemente ausgeblendet laden ohne Hintergrund = 1 gesetzt).

Beachten Sie auch: "Sie müssen auf einem Webserver ausgeführt werden, anstatt die Datei direkt in Ihrem Browser zu öffnen. JS-Sicherheitsbeschränkungen verhindern, dass die API bei lokaler Ausführung funktioniert."

2
jake

@Gadss Antwort funktioniert großartig, aber ich habe festgestellt, dass Sie das iframe src aktualisieren müssen, um die Aktivierung der Vimeo-API einzuschließen. Geben Sie nach der Vimeo-ID einfach api = 1 an.

Ich habe auch festgestellt, dass dies auf Safari aus irgendeinem Grund manchmal nicht funktioniert.

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

sie können einfach "stummgeschaltet = 1" angeben, damit das Video stummgeschaltet wird ... Chrom lässt die Videos automatisch abspielen, die stumm geschaltet sind

1
Bala

Nur so hat es für mich funktioniert: http://jsfiddle.net/87dsjL8q/108/

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

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

Sie versuchen, ?muted=1 Nach dem Link in attribute src Einzufügen.

Zum Beispiel

<iframe id="vimeo_player" src="https://player.vimeo.com/video/257992348?muted=1">
0
Huynh Thai Hung

Ich habe einen Weg gefunden, es zu tun. Sie starten das Video stumm, so dass es automatisch abgespielt wird, und setzen Sie dann beim ersten timeupdate die Lautstärke auf 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