【问题标题】:How do I automatically play a Youtube video (IFrame API) muted?如何自动播放静音的 Youtube 视频 (IFrame API)?
【发布时间】:2012-02-10 18:23:25
【问题描述】:
<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/JW5meKfy3fY?wmode=opaque&autohide=1&autoplay=1&volume=0&vol=0&mute=1" frameborder="0">&lt;br /&gt;</iframe>

视频没有静音!我希望第一次播放时音量为 0...

【问题讨论】:

    标签: javascript jquery youtube


    【解决方案1】:

    Youtube 不通过 url 参数提供静音(请参阅http://code.google.com/apis/youtube/player_parameters.html)。

    您必须为此使用 javascript。详情请见http://code.google.com/apis/youtube/js_api_reference.html

    但是,请注意上面链接页面上的警告: “YouTube JavaScript Player API 已于 2015 年 1 月 27 日被弃用。YouTube Flash 嵌入也已被弃用。有关更多信息,请参阅弃用政策。请将您的应用程序迁移到 IFrame API,它可以智能地使用任何嵌入式播放器 – HTML () 或 Flash () – 客户端支持。”

    HTML

    <iframe class="youtube-player" id="player" type="text/html" src="http://www.youtube.com/embed/JW5meKfy3fY?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" frameborder="0">&lt;br /&gt;</iframe>
    

    请注意 url 中的 enablejsapi=1。

    Javascript

    var player =  iframe.getElementById('player');
    player.mute();
    

    更新

    之前的代码存在一些问题,无法与当前的 API 一起使用(playerVars 语法错误)。这是更新的代码。您可能需要修改所需的参数。

             
        <div id="player"></div>
        <script>
          // 1. This code loads the IFrame Player API code asynchronously.
          var tag = document.createElement('script');
    
          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
          // 2. This function creates an <iframe> (and YouTube player)
          //    after the API code downloads.
          var player;
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              height: '100%',
              width: '100%',
              playerVars: {
                        autoplay: 1,
                        loop: 1,
                        controls: 0,
                        showinfo: 0,
                        autohide: 1,
                        modestbranding: 1,
                        vq: 'hd1080'},
              videoId: '1pzWROvY7gY',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }
    
          // 3. The API will call this function when the video player is ready.
          function onPlayerReady(event) {
            event.target.playVideo();
            player.mute();
          }
    
          var done = false;
          function onPlayerStateChange(event) {
            
          }
          function stopVideo() {
            player.stopVideo();
          }
        </script>

    【讨论】:

    • 它说“iframe 未定义”?
    • 它工作,谢谢!但是IE7、IE8呢?它不适用于此浏览器。有什么我们可以做的吗?
    • 如果循环参数不适合您 - 添加一个“播放列表:videoId”参数。 stackoverflow.com/a/13047331/901311
    • 所有这些都是为了让视频静音,是否有疏忽?但此解决方案自 2016 年 11 月 11 日起有效。
    • @GagandeepSingh 请使用工作代码更新您的上述解决方案。
    【解决方案2】:

    player_api 将于 2015 年 6 月 25 日弃用。 对于播放 youtube 视频,有一个新的 api IFRAME_API

    如下代码:

    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
    
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
    
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
    
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
    

    【讨论】:

      【解决方案3】:

      试试这个效果很好

      <html><body style='margin:0px;padding:0px;'>
              <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>
                      var player;
              function onYouTubeIframeAPIReady()
              {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}
              function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}
              </script>
              <iframe id='playerId' type='text/html' width='1280' height='720'
              src='https://www.youtube.com/embed/R52bof3tvZs?enablejsapi=1&rel=0&playsinline=1&autoplay=1&showinfo=0&autohide=1&controls=0&modestbranding=1' frameborder='0'>
              </body></html>

      【讨论】:

        【解决方案4】:

        您可以选择视频播放器,然后设置其音量:

        var mp = iframe.getElementById('movie_player');
        mp.setVolume(0);
        

        来源:http://userscripts.org/scripts/review/49366

        【讨论】:

        • 静音更好,有了它你可以在不改变原始音量的情况下取消静音。
        • 试图修复你的小提琴 TIMEX 不得不停下来听整首歌哈哈......
        • @Loïs Di Qual AAAAaaaaah,它确实有效,非常感谢你,伙计,你让我开心:)
        【解决方案5】:

        var video1;
        
        function onYouTubeIframeAPIReady(){
        	player = new YT.Player("video1", {
        		videoId: "id-number",
        		width: 300,
        		height: 200, 
        		playerVars: {
        			"autoplay": 1, // and 0 means off
        			"controls": 1,
        			"showinfo": 0,
        			"modestbranding": 0,
        			"loop": 1,
        			"fs": 0,
        			"cc_load_policy": 0,
        			"iv_load_policy": 3,
        			},
        		events: {
        		    'onReady': onPlayerReady
        		}
        	});
          }
        
        function onPlayerReady(event) {
            event.target.mute();
            event.target.setVolume(0); //this can be set from 0 to 100
        }

        请记住,在 IE 和 Safari 中声音不会被静音。

        【讨论】:

          【解决方案6】:

          更新 2021 以在桌面/移动设备上循环和自动播放视频(在 iPhone X - Safari 上测试)。

          我正在使用onPlayerStateChange 事件,如果视频结束,我会再次播放视频。在 YouTube API 中引用 onPlayerStateChange event

          <div id="player"></div>
          <script>
            var tag = document.createElement('script');
          
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
          
            var player;
          
            function onYouTubeIframeAPIReady() {
              player = new YT.Player('player', {
                height: '100%',
                width: '100%',
                playerVars: {
                  autoplay: 1,
                  loop: 1,
                  controls: 0,
                  showinfo: 0,
                  autohide: 1,
                  playsinline: 1,
                  mute: 1,
                  modestbranding: 1,
                  vq: 'hd1080'
                },
                videoId: 'ScMzIvxBSi4',
                events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
                }
              });
            }
          
            function onPlayerReady(event) {
              event.target.mute();
          
              setTimeout(function() {
                event.target.playVideo();
              }, 0);
            }
          
            function onPlayerStateChange(event) {
              if (event.target.getPlayerState() == 0) {
                setTimeout(function() {
                  event.target.playVideo();
                }, 0);
              }
            }
          </script>

          【讨论】:

            【解决方案7】:

            接受的答案效果很好。 我想要更多控制,所以我在脚本中添加了更多功能:

            function unmuteVideo() {
                player.unMute();
                return false;
              }
              function muteVideo() {
                player.mute();
                return false;
              }
              function setVolumeVideo(volume) {
                player.setVolume(volume);
                return false;
              }
            

            这里是 HTML:

            <br>
            <button type="button" onclick="unmuteVideo();">Unmute Video</button>
            <button type="button" onclick="muteVideo();">Mute Video</button>
            <br>
            <br>
            <button type="button" onclick="setVolumeVideo(100);">Volume 100%</button>
            <button type="button" onclick="setVolumeVideo(75);">Volume 75%</button>
            <button type="button" onclick="setVolumeVideo(50);">Volume 50%</button>
            <button type="button" onclick="setVolumeVideo(25);">Volume 25%</button>
            

            现在您可以更好地控制声音... 查看更多参考网址:

            YouTube IFrame Player API

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2017-04-11
              • 1970-01-01
              • 2015-04-11
              • 2019-07-12
              • 1970-01-01
              • 2016-08-02
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多