html - videos - Silenciar un video vimeo incrustado

lo sentimos debido a la configuración de privacidad, no puedes reproducir aquí el video.

Question

En un sitio web que estoy construyendo tengo un video de vimeo incrustado. El cliente necesita mantener el sonido en el video, obviamente, para las personas que lo encuentran en vimeo. Sin embargo, para su sitio web el sonido es simplemente molesto. Así que necesito encontrar una manera de silenciar el audio dentro del código para la inserción. Lo he buscado en Google pero parece que no puedo encontrar nada legible. Como puede ver en mi código de abajo, he usado el comando de reproducción automática en el enlace que esperaba poder hacer algo similar para silenciar el sonido.

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

Gracias

Answer 1

Para los miembros que no pagan

Solo necesitas agregar el parámetro muted . P.ej:

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

Para miembros pagados

Según Vimeo, el parámetro de background solo se admite para videos alojados por miembros pagados .

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

Answer 2

** Aquí está mi solución: http://jsfiddle.net/jakeoblivion/phytdt9L/5/

(Necesitará sus propios iconos de reproducción / pausa de silencio / desactivación de silencio)

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

Pasé años intentando y nada parecía funcionar.

Solo quería tener una reproducción automática de Vimeo silenciada (volumen 0) con los sencillos controles Reproducir / Pausa Silencio / No silenciar, en lugar de los predeterminados. (No dude en utilizar iconos en lugar de los colores temporales que puse).

(Si desea volver a agregar los controles predeterminados pero mantenerlos en silencio, elimine "? background = 1". Por defecto, background = 1 configurará video.vimeo ("setVolume", 0) y ocultar los controles, así que también agregué el silencio en carga sin el fondo = 1 juego).

También tenga en cuenta: "Deberá estar ejecutándose en un servidor web en lugar de abrir el archivo directamente en su navegador. Las restricciones de seguridad de JS evitarán que la API funcione cuando se ejecuta localmente".

Answer 3

Dado que la mayoría de las respuestas aquí se refieren a la antigua API de Vimeo. Aquí está la forma más simple con la nueva api. Puede incluir vimeo player.js desde su CDN o puede descargarlo o puede incluirlo desde npm.

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

o

npm install @ vimeo / player

entonces puedes hacer lo siguiente.

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

    player.setVolume(0);
  </script>

Eso es. Y si estás usando angular 2+,

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

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

aquí e.target es $ evento que se pasaría de la plantilla. Probablemente podría ser un evento iframe (cargar). O puede ser que puedas usar jquery para seleccionar iframe.

Answer 4

En caso de que ayude a alguien, Vimeo ha agregado un parámetro de "fondo" para incrustar videos, que reproduce automáticamente los videos en silencio. En algunos casos, será útil cuando las personas quieran silenciar videos. Este es su ejemplo:

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

Answer 5

Esta es la única forma en que funcionó para mí: http://jsfiddle.net/87dsjL8q/108/

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

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

Answer 6

He encontrado una manera de hacerlo. Inicia el video silenciado para que se reproduzca automáticamente, luego, en la primera actualización de tiempo , configura el volumen a 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 );
}

Answer 7

La respuesta de @Gadss funciona muy bien, pero encontré que necesitas actualizar el iframe src para incluir la activación de la API de Vimeo. Solo incluye api = 1 después de la ID de vimeo.

También he encontrado que esto a veces no funciona en Safari por alguna razón.

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

Answer 8

Parece que Vimeo proporciona una biblioteca actualizada, y la sintaxis de la API es un poco diferente de la anterior (Froogaloop). Aquí es cómo silenciar un video incrustado con 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>

Espero que esto ayude a cualquiera que esté usando la nueva biblioteca. La documentación está en vimeo/player.js

Answer 9

Probé los ejemplos en las respuestas sin suerte. Después de buscar en la documentación noté que falta el parámetro &player_id=IFRAME_ID . Tal vez algo cambió en la API de Vimeo, de todos modos el siguiente ejemplo funciona para mí:

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

Answer 10

estarás usando setVolume api en tu vimeo .. player.api(''setVolume'', 0); Será así ...

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

Answer 11

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

solo puedes dar "muted = 1" para que el video se enmudezca ... Chrome permite que los videos se reproduzcan automáticamente