覆盖 playerVars 控件：youtube API 中视频的动态属性答案

【问题标题】：Override playerVars controls:attrib dynamically for videos in youtube API覆盖 playerVars 控件：youtube API 中视频的动态属性
【发布时间】：2017-02-06 12:20:09
【问题描述】：

我有以下用于 youtube API 的 JS 代码 -

<html>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var ScriptTag = document.getElementsByTagName('script')[0];
ScriptTag.parentNode.insertBefore(tag, ScriptTag);

var player; 
      function onYouTubeIframeAPIReady() {                      
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId : 'YtF6p_w-cSc',                 
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }      
        });
      }       

       function onPlayerReady(event) {                                        
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {   
        if (event.data == YT.PlayerState.ENDED && !done) {   
            player.loadVideoById ('4MJRS-cLozU');
        }       
      }

</script>
<body>
  <div id="player"></div>  
 </body>
</html>

这里是jsfiddle

说明 -

在上面的代码中，它们是2 videos，它们一个接一个地播放 [IE。最初是YtF6p_w-cSc，然后是4MJRS-cLozU]。现在，当第一个视频是loaded/played 我想隐藏控件 [IE。 PlayerVar{control : 0}] 下面以黄色突出显示的部分应该被删除。

而对于其他视频，我想要它回来 [即 control:1]。

简单来说，我想hide control 为1st video 并希望它返回2nd video。

如何实现这一点。请帮忙！！

【问题讨论】：

标签： javascript youtube youtube-api youtube-javascript-api youtube-iframe-api

【解决方案1】：

在网址末尾添加controls=0。

要重新启用控件，请使用controls=1或 2。

在您的配置中添加与其他属性和事件相同的区域：

      playerVars: {
        controls: '0'
      },

要重新启用控件，请使用：

      playerVars: {
        controls: '1' //or 2 
      },

由于严格的沙箱，代码段无法完全发挥作用。试试PLUNKER

手动制作您的 iframe 并更改网址。不要尝试更改playerVars Youtube 允许在playerVars 中动态更改的唯一选项是字幕。

片段

<iframe src="http://youtube.com/embed/ir2qcPwZFdQ?controls=0&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>

<iframe src="http://youtube.com/embed/ir2qcPwZFdQ?color=white&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="345" frameborder="0" allowfullscreen=""></iframe>

<div id="player"></div>
<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api?controls=0";
  var ScriptTag = document.getElementsByTagName('script')[0];
  ScriptTag.parentNode.insertBefore(tag, ScriptTag);

  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'YtF6p_w-cSc',
      playerVars: {    //<===============================]HERE]
        controls: '0',
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED && !done) {
      player.loadVideoById('4MJRS-cLozU');
    }
  }
</script>


</body>

</html>

【讨论】：

我尝试在URL 末尾添加controls=0，但它不起作用。寻找酒吧节目...
更新显示 controls=0 适用于 iframe 的 url。 playerVars 在 YT 中命名。你必须破解iframe_api 才能访问YTConfig。工作量太大。
感谢您的更新。但是，我想要实现的与您提到的不同。让我明确一点，我想要播放 2 个视频，第一个视频控件应该被禁用，而对于第二个视频，控件应该出现。这些视频应该一个接一个地播放。
嗯......你无法弄清楚那部分吗？您是否剪切并粘贴了代码？我的意思是，如果你这样做没关系，每个人都必须从头开始。我需要知道你的理解程度。当我真正应该向你解释如何爬行和行走时，我不想浪费时间试图解释如何跑步和跳跃。
enablejsapi 确实应该默认启用，一些 Youtube API 被破坏了。太好了，先生，编码愉快。

【解决方案2】：

下面的代码对我有用 -

<!doctype html>
<html>
<body>
<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/YtF6p_w-cSc?autoplay=1&controls=0&enablejsapi=1" frameborder="0"></iframe>

<script>
  // Load 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);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',      
      events: {                
            'onStateChange': onPlayerStateChange
          } 
    });              
      var done = false;
      function onPlayerStateChange(event) {   
        if (event.data == YT.PlayerState.ENDED && !done) {        
     document.getElementById('ytplayer').src ="https://www.youtube.com/embed/4MJRS-cLozU?autoplay=1&controls=1&enablejsapi=1"
        }       
      }
  }
</script>
</body>
</html>

【讨论】：

我看到你在网址中使用了control=0/1，我认为这对你不起作用？