在我正在建立的网站上,我嵌入了一个vimeo视频.对于在vimeo上找到它的人来说,客户需要在视频上保持声音.然而,对于她的网站来说,声音很简单.所以我需要找到一种方法来静音嵌入代码中的音频.我用Google搜索了它,但似乎找不到任何清晰易读的东西.从下面的代码中我可以看到,我在链接中使用了autoplay命令,我希望我能做类似的事情来静音.
谢谢
由于这里的大多数答案都是指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.
万一它可以帮助任何人,Vimeo为嵌入视频添加了一个"背景"参数,可以静默地自动播放视频.在某些情况下,在人们想要静音视频的情况下这将是有用的 - 这是他们的例子:
<iframe src="https://player.vimeo.com/video/76979871?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
我没有运气就在答案中尝试了这些例子.在查看文档后,我注意到缺少参数&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" 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>
你将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" 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>
似乎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" 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
您只需要添加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