Question

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

put

以下是jsfiddle

说明 -

在上面的代码中，它们是<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>一个接一个地播放 [即最初2 videos然后YtF6p_w-cSc]。现在，当第一个视频是4MJRS-cLozU时，我想要隐藏控件 [即loaded/played]下面突出显示的黄色部分应该被删除。

而对于我想要的其他视频[即控制：1]。

简单来说，我想PlayerVar{control : 0}为hide control，并希望它回到1st video。

如何实现这一目标。请帮忙。!!

Answer 1

将controls=0添加到网址的末尾。

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

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

      playerVars: {
        controls: '0'
      },

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

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

由于严格的沙箱，

Snippet功能不全。试试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>

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>

覆盖playerVars控件：动态地为youtube API中的视频提供attrib

2 个答案:

段