30

在我正在构建的网站上，我嵌入了一个 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>

谢谢

4

12 回答 12

49

万一它对任何人都有帮助，Vimeo 已经添加了一个用于嵌入视频的“背景”参数，它可以自动静默播放视频。在某些情况下，这在人们想要使视频静音的情况下很有用 - 这是他们的示例：

<iframe src="https://player.vimeo.com/video/76979871?background=1" 
    width="500" height="281" frameborder="0" webkitallowfullscreen 
    mozallowfullscreen allowfullscreen></iframe>
于 2016-01-12T11:46:46.623 回答
19

你将setVolume在你的 vimeo 中使用 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>
于 2014-12-12T03:02:16.220 回答
15

对于非付费会员

您只需要添加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

于 2018-05-22T19:26:13.033 回答
13

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

于 2016-08-07T14:36:24.170 回答
13

我尝试了答案中的示例，但没有成功。查看文档后，我注意到缺少参数&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>

于 2015-10-23T07:52:00.007 回答
8

由于这里的大多数答案都是指 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。

于 2017-12-29T07:53:35.837 回答
2

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

例如

<iframe id="vimeo_player" src="https://player.vimeo.com/video/257992348?muted=1">
于 2019-08-16T08:48:34.570 回答
2

@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>
于 2015-09-23T18:07:36.230 回答
2

**这是我的解决方案：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) 并隐藏控件，所以我还添加了静音在没有设置背景=1 的情况下加载）。

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

于 2016-02-28T11:20:14.430 回答
2

我找到了一种方法。您将视频静音，使其自动播放，然后在第一次更新时将音量设置为 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 );
}
于 2018-11-21T14:47:54.607 回答
1 
<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>

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

于 2018-09-10T07:25:54.053 回答
1

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

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

 player.addEvent('ready', function() {
     player.api('setVolume', 20); 
 });
于 2016-02-04T20:59:06.243 回答