静音嵌入式vimeo视频

 与天使有染的救赎_164 发布于 2022-12-14 10:57

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

    

谢谢

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.

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

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

    2022-12-14 10:58 回答
  • 我没有运气就在答案中尝试了这些例子.在查看文档后,我注意到缺少参数&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>
    2022-12-14 10:58 回答
  • 你将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"    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>
    

    2022-12-14 10:58 回答
  • 似乎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"    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

    2022-12-14 10:58 回答
  • 对于非付费会员

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

    2022-12-14 10:58 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有