在我正在建设的网站上,我嵌入了vimeo视频。对于在vimeo上找到它的人来说,客户需要在视频上保持声音。然而,对于她的网站来说,声音很简单。所以我需要找到一种方法来静音嵌入代码中的音频。我用谷歌搜索了它,但似乎找不到任何清晰可辨的东西。从下面的代码中我可以看到,我在链接中使用了autoplay命令,我希望我能做类似的事情来静音。
<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>
由于
答案 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&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>
答案 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&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>
希望这有助于任何使用新库的人。文档位于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&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>
答案 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">