【问题标题】：Muting an embedded vimeo video静音嵌入的 vimeo 视频
【发布时间】：2014-12-26 07:06:17
【问题描述】：

在我正在构建的网站上，我嵌入了一个 vimeo 视频。客户需要为在 vimeo 上找到声音的人保留视频中的声音。然而，对于她的网站来说，声音实在是太烦人了。所以我需要找到一种方法来使嵌入代码中的音频静音。我用谷歌搜索了它，但似乎找不到任何清晰的东西。正如您从下面的代码中看到的那样，我在链接中使用了自动播放命令，我希望我可以做类似的事情来静音。

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

谢谢

【问题讨论】：

查看link
@turtle 非常感谢，但我已经找到了，但它没有用，这就是我在这里的原因。感谢您的尝试，尽管非常感谢

标签： html vimeo vimeo-api mute vimeo-player

【解决方案1】：

如果它可以帮助任何人，Vimeo have added a 'background' parameter 嵌入视频，自动静默播放视频。在某些情况下，这在人们想要将视频静音的情况下很有用 - 这是他们的示例：

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

【讨论】：

不幸的是，这只适用于通过 Plus 帐户上传的视频。

【解决方案2】：

您将在您的 vimeo 中使用 setVolume api.. player.api('setVolume', 0); 会是这样的……

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

【讨论】：

应用上述脚本后出现此错误“未捕获（承诺中）错误：必须在选项对象中或作为 data-vimeo-id 或数据传递 id 或 url -vimeo-url 属性。(…)"
我已经用最新的 API 配置更新了答案

【解决方案3】：

对于非付费会员

您只需要添加muted 参数。例如：

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

对于付费会员

根据 Vimeo，background 参数仅支持付费会员主持的视频。

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

【讨论】：

【解决方案4】：

我尝试了答案中的示例，但没有运气。查看文档后，我注意到缺少参数&player_id=IFRAME_ID。也许在 Vimeo API 中发生了一些变化，无论如何下面的例子对我有用：

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

【讨论】：

在找到这个答案之前，我尝试了所有可能的排列，但都没有运气。它就像一个魅力。肯定有 &player_id=IFRAME_ID 选项使它起作用。
效果很好，虽然我不确定你为什么要添加 ajax 脚本？使用此方案时，别忘了更改视频后的位，本例为api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff

【解决方案5】：

似乎 Vimeo 提供了一个更新的库，API 语法与旧的（Froogaloop）有点不同。以下是使用 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>

希望这对使用新库的任何人有所帮助。文档位于vimeo/player.js

【讨论】：

完美运行。请注意：不必等到播放器准备好调用 setVolume(0)

【解决方案6】：

因为这里的大多数答案都是指 Vimeo 的旧 api。这是使用新 api 的最简单方法。您可以从他们的 CDN 包含 vimeo player.js，也可以下载它，也可以从 npm 包含它。

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

或

npm install @vimeo/player

那么您可以执行以下操作。

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

    player.setVolume(0);
  </script>

就是这样。如果你使用 angular 2+，

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

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

这里 e.target 是从模板传递的 $event。可能它可能是 iframe（加载）事件。或者您可以使用 jquery 来选择 iframe。

【讨论】：

天哪，我刚刚登录是为了支持您的解决方案。我在 Shopify 和 BIM 中实现了它！有用。非常感谢。

【解决方案7】：

@Gadss 回答效果很好，但我发现您需要更新 iframe src 以包含 Vimeo api 的激活。只需在 vimeo id 后包含 api=1。

我还发现，出于某种原因，这有时在 Safari 上不起作用。

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

【讨论】：

【解决方案8】：

**这是我的解决方案： http://jsfiddle.net/jakeoblivion/phytdt9L/5/

（您将需要自己的播放/暂停静音/取消静音图标）

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

花了很长时间尝试，但似乎没有任何效果。

我只是想让 Vimeo 自动播放静音（音量 0），使用简单的播放/暂停静音/取消静音控件，而不是默认控件。（随意使用图标而不是我放置的临时颜色）。

（如果要添加默认控件但保持静音，请删除“？background=1”。默认情况下，background=1 将设置 video.vimeo("setVolume", 0) 并隐藏控件，所以我也添加了没有设置 background=1 的加载静音）。

另请注意： “您需要在 Web 服务器上运行，而不是直接在浏览器中打开文件。JS 安全限制将阻止 API 在本地运行时工作。”

【讨论】：

Vimeo 改变了他们的 api，所以用 .api("setVolume", 0);现在是：.vimeo("setVolume", 0);
正是我想要的。但是你应该根据新的 API 更新你的代码

【解决方案9】：

我找到了一种方法。您将视频静音，使其自动播放，然后在第一次 timeupdate 时将音量设置为 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 );
}

【讨论】：

这与 OP 的问题相反，但确实帮助了我如此赞成，谢谢！

【解决方案10】：

您尝试在attribute src 中的链接后插入?muted=1

例如

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

【讨论】：

【解决方案11】：

这是对我有用的唯一方法：http://jsfiddle.net/87dsjL8q/108/

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

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

【讨论】：

【解决方案12】：

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

您可以只输入“muted=1”，这样视频就会被静音... chrome允许静音的视频自动播放

【讨论】：