静音嵌入式vimeo视频

时间:2014-10-30 09:45:47

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

在我正在建设的网站上,我嵌入了vimeo视频。对于在vimeo上找到它的人来说,客户需要在视频上保持声音。然而,对于她的网站来说,声音很简单。所以我需要找到一种方法来静音嵌入代码中的音频。我用谷歌搜索了它,但似乎找不到任何清晰可辨的东西。从下面的代码中我可以看到,我在链接中使用了autoplay命令,我希望我能做类似的事情来静音。

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

由于

12 个答案:

答案 0 :(得分:36)

如果它可以帮助任何人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>

答案 1 :(得分:19)

你将在你的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>

答案 2 :(得分: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>

答案 3 :(得分:11)

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

答案 4 :(得分: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>

就是这样。如果您使用的是角度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。

答案 5 :(得分:8)

对于非付费会员

您只需添加muted参数即可。 E.g:

<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

答案 6 :(得分: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>

答案 7 :(得分: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)与简单的播放/暂停静音/取消静音控制,而不是默认控制。 (随意使用图标而不是我放的临时颜色。)

(如果您想要添加默认控件但保持静音,请删除&#34;?background = 1&#34;。默认情况下,background = 1会设置video.vimeo(&#34; setVolume&#34;, 0)并隐藏控件,所以我还在加载时添加了静音而没有设置background = 1。

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

答案 8 :(得分:1)

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

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

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

答案 9 :(得分: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>

您只需输入“ muted = 1”,视频就会被静音... chrome允许自动播放已静音的视频

答案 10 :(得分:0)

我找到了一种方法。您开始将视频设为静音,使其自动播放,然后在第一个 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 );
}

答案 11 :(得分:0)

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

例如

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