为 youtube API 中的视频动态覆盖 playerVars controls:attrib

Question

我有下面的 youtube JS 代码 API -

<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。

如何实现。请帮忙。!!

Answer 1

将controls=0添加到url的末尾。

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

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

      playerVars: {
        controls: '0'
      },

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

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

由于严格的沙箱，代码段无法完全正常运行。尝试 PLUNKER

手动制作 iframe 并更改 url。不要尝试更改 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>

Answer 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>

为 youtube API 中的视频动态覆盖 playerVars controls:attrib

Override playerVars controls:attrib dynamically for videos in youtube API

javascript

youtube

youtube-api

youtube-javascript-api

youtube-iframe-api

片段