如何自动播放静音的 Youtube 视频 (IFrame API)?

Posted

技术标签:

【中文标题】如何自动播放静音的 Youtube 视频 (IFrame API)?【英文标题】:How do I automatically play a Youtube video (IFrame API) muted? 【发布时间】: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...

【问题讨论】:

【参考方案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”参数。 ***.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

【讨论】:

以上是关于如何自动播放静音的 Youtube 视频 (IFrame API)?的主要内容,如果未能解决你的问题,请参考以下文章

一次静音播放多个YouTube视频

Youtube视频w/Javascript API-自动播放和静音

我如何对 youtube 嵌入播放器进行编程以在单击时取消静音

视频取消静音时无法通过 iframe API 播放 YouTube 视频

无法在移动设备上使用 Revolution Slider 取消 YouTube 视频静音

即使手机处于静音或振动状态,如何让视频播放声音? [复制]