Html 将嵌入的 vimeo 视频静音
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26649641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Muting an embedded vimeo video
提问by DanielNolan
On a website I am building I have a vimeo video embedded. The client needs to keep the sound on the video obviously for people that find it on vimeo. However for her website the sound is just plain annoying. So I need to find a way to mute the audio within the code for the embed. I have googled it but can't seem to find anything legible. As you can see from my code below, I have used the autoplay command within the link I was hoping I could do a similar thing to mute the sound.
在我正在构建的网站上，我嵌入了一个 vimeo 视频。客户需要为在 vimeo 上找到声音的人明显保留视频中的声音。然而，对于她的网站来说，声音只是很烦人。所以我需要找到一种方法来使嵌入代码中的音频静音。我用谷歌搜索过，但似乎找不到任何清晰的内容。正如您从下面的代码中看到的那样，我在链接中使用了自动播放命令，我希望我可以做类似的事情来静音。
<iframe src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Thanks
谢谢
回答by toby1kenobi
In case it helps anyone, Vimeo have added a 'background' parameterfor embedding videos, that autoplays videos silently. In some cases that will be useful where people want to mute videos - this is their example:
为了帮助任何人，Vimeo 添加了一个用于嵌入视频的“背景”参数，该参数可以静默自动播放视频。在某些情况下，当人们想要将视频静音时会很有用 - 这是他们的例子：
<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="500" height="281" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
回答by gadss
you will be using setVolumeapi in your vimeo.. player.api('setVolume', 0);it will be like this...
你将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&byline=0&portrait=0&color=d01e2f&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>
回答by Jordy
I tried the examples in the answers with no luck. After looking into the documentation I noticed there is missing the parameter &player_id=IFRAME_ID. Maybe something changed in the Vimeo API, anyway the following example works for me:
我在没有运气的情况下尝试了答案中的示例。查看文档后，我注意到缺少参数&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>回答by Cafe Coder
Seems like Vimeo is providing an updated library, and the API syntax is a bit different from the old one (Froogaloop). Here's how to mute an embedded video with JS:
好像 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&byline=0&portrait=0&color=d01e2f&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>
Hope this helps out anyone who's using the new library. Documentation is at vimeo/player.js
希望这对使用新库的人有所帮助。文档位于vimeo/player.js
回答by Meydjer Luzzoli
For non-paying members
对于非付费会员
You just need to add the mutedparameter. E.g.:
您只需要添加muted参数。例如：
<iframe src="https://vimeo.com/48400332?autoplay=1&loop=1&muted=1" ></iframe>
For paid members
对于付费会员
According to Vimeo, the backgroundparameter is only supported for videos hosted by paid members.
据 Vimeo 称，该background参数仅支持付费会员托管的视频。
Source: https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
来源：https: //help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
回答by dilantha111
Since most of the answers here are referring to Vimeo's old api. Here is the simplest way with the new api. You can include vimeo player.js from their CDN or you can download it or you can include it from npm.
由于这里的大多数答案都是指 Vimeo 的旧 api。这是使用新 api 的最简单方法。你可以从他们的 CDN 中包含 vimeo player.js 或者你可以下载它或者你可以从 npm 中包含它。
<script src="https://player.vimeo.com/api/player.js"></script>
or
或者
npm install @vimeo/player
npm install @vimeo/player
then you can do the following.
那么您可以执行以下操作。
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.setVolume(0);
</script>
that's it. And if you are using angular 2+,
就是这样。如果您使用的是 angular 2+，
import * as Vimeo from '@vimeo/player';
const iframe = e.target;
const player = new Vimeo(iframe);
player.setVolume(0);
here e.target is $event which would be passed from the template. Probably it could be iframe (load) event. Or may be you can use jquery to select iframe.
这里 e.target 是从模板传递的 $event 。可能是 iframe (load) 事件。或者您可以使用 jquery 来选择 iframe。
回答by jake
**Here is my solution: http://jsfiddle.net/jakeoblivion/phytdt9L/5/
**这是我的解决方案：http: //jsfiddle.net/jakeoblivion/phytdt9L/5/
(You will need your own play/pause mute/unmute icons)
（您将需要自己的播放/暂停静音/取消静音图标）
//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');
}
});
Spent ages trying and nothing seemed to work to.
花了很长时间尝试，但似乎没有任何效果。
I just wanted to have a Vimeo autoplay muted (volume 0) with simple Play/Pause Mute/Unmute controls, instead of their default ones. (feel free to use icons instead of the temporary colours I put).
我只是想让 Vimeo 自动播放静音（音量 0），带有简单的播放/暂停静音/取消静音控件，而不是它们的默认控件。（随意使用图标而不是我放置的临时颜色）。
(if you want to add the default controls back but keep muted, remove "?background=1". By default background=1 will set video.vimeo("setVolume", 0) and hide controls, so I also added the mute on load without the background=1 set).
（如果您想重新添加默认控件但保持静音，请删除“?background=1”。默认情况下，background=1 将设置 video.vimeo("setVolume", 0) 并隐藏控件，因此我还添加了静音加载没有背景= 1 集）。
Also note: "You'll need to be running on a web server instead of opening the file directly in your browser. JS security restrictions will prevent the API from working when run locally."
另请注意：“您需要在 Web 服务器上运行，而不是直接在浏览器中打开文件。JS 安全限制将阻止 API 在本地运行时工作。”
回答by jonnglass
@Gadss answer works great but I found that you need update the iframe src to include the activation of the Vimeo api. Just include api=1 after the vimeo id.
@Gadss 答案很好，但我发现您需要更新 iframe src 以包含 Vimeo api 的激活。只需在 vimeo id 后包含 api=1 即可。
I've also found that this sometimes doens't work on Safari for some reason.
我还发现由于某种原因，这有时在 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&byline=0&portrait=0&color=d01e2f&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>
回答by Pavelescu Razvan
This is the only way it worked for me: http://jsfiddle.net/87dsjL8q/108/
这是它对我有用的唯一方法：http: //jsfiddle.net/87dsjL8q/108/
var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 20);
});
回答by Bala
<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>
you can just give "muted=1" so the video will be muted... chrome allow the videos autoplay that are muted
你可以只给“静音= 1”所以视频将被静音...... chrome允许被静音的视频自动播放
