javascript - 控件和循环不适用于 Youtube 视频（YouTube API）

Question

我正在使用 YouTube 的 API 在我的页面上加载 YouTube 视频。我有'controls': 0，'loop': 1但视频标题仍然显示，并且视频完成后它不会循环播放。不确定为什么？

代码：

    //  Load  IFrame Player API 
    var tag = document.createElement('script');

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

    // Creating iframe
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        videoId: 'jagIsKF8oVA',        
        playerVars: {'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1, 'rel': 0 },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

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

    var done = false;
    function onPlayerStateChange(event) {
      // if (event.data == YT.PlayerState.PLAYING && !done) {
      //   setTimeout(stopVideo, 6000);
      //   done = true;
      // }
    }
    function stopVideo() {
      // player.stopVideo();
    }

标签： javascriptiframeyoutube-api

Answer 1

根据您的问题，您不能使用该controls参数来隐藏视频的标题。从文档中，

控制

该参数表示是否显示视频播放器控件：

• controls=0 – 播放器控件不显示在播放器中。
• controls=1（默认）- 播放器控件显示在播放器中。

和loop参数：

环形

注意：此参数在 AS3 播放器和 IFrame 嵌入中的支持有限，它们可以加载 AS3 或 HTML5 播放器。目前，loop 参数仅在与 playlist 参数结合使用时才在 AS3 播放器中起作用。要循环播放单个视频，请将循环参数值设置为 1，并将播放列表参数值设置为已在 Player API URL 中指定的相同视频 ID：

 https://www.youtube.com/v/VIDEO_ID?
     version=3
     &loop=1
     &playlist=VIDEO_ID

要显示标题等信息，可以使用showinfo参数：

显示信息

支持的值为 0 和 1。

将该参数的值设置为 0 会导致播放器在视频开始播放之前不显示视频标题和上传者等信息。

如果播放器正在加载播放列表，并且您明确将参数值设置为 1，则在加载时，播放器还将显示播放列表中视频的缩略图。

注意：注意：此参数已弃用，2018 年 9 月 25 日之后将被忽略。

即使它说showinfo昨天已弃用，我仍然尝试过它是否仍在工作。是的，它仍在工作。

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'jagIsKF8oVA',        
    playerVars: {'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1, 'rel': 0, 'showinfo': 0 },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

如果这不起作用，我认为您需要自定义代码以隐藏视频标题并使用AS3播放器来实现loop参数。