静音嵌入式vimeo视频

Question

在我正在建立的网站上,我嵌入了一个vimeo视频.对于在vimeo上找到它的人来说,客户需要在视频上保持声音.然而,对于她的网站来说,声音很简单.所以我需要找到一种方法来静音嵌入代码中的音频.我用Google搜索了它,但似乎找不到任何清晰易读的东西.从下面的代码中我可以看到,我在链接中使用了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>

谢谢

Answer 1

万一它可以帮助任何人,Vimeo为嵌入视频添加了一个"背景"参数,可以静默地自动播放视频.在某些情况下,在人们想要静音视频的情况下这将是有用的 - 这是他们的例子:

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

Answer 2

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

Answer 3

我没有运气就在答案中尝试了这些例子.在查看文档后,我注意到缺少参数&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>

Answer 4

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

Answer 5

对于非付费会员

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

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

而已.如果你使用角度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.