javascript - cc_load_policy如何在youtube iframe Player API中显示字幕？

Question

我正在尝试使用youtube API-iframe播放器的“cc_load_policy”参数。而且我无法使其在我的页面上运行。

如您所见，我将cc_load_policy设置为1，以便始终显示字幕，而cc_lang则pred为“en”(因为我的字幕是英文)。

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '100%',
        width: '100%',
        videoId: /*MY YOUTUBE ID*/,
        playlist: /*MY YOUTUBE ID */,
        playerVars:{
           'autoplay': 1,
           'controls': 0,
           'disablekb': 0,
           'fs':0,
           'modestbranding':0,
           'rel':0,
           'hd':1,
           'autohide': 0,
           'wmode': 'transparent',
           'showinfo': 0,
           'loop' : 1,
           'cc_load_policy' : 1,
           'cc_lang_pref' : 'en',
           'iv_load_policy' : 3
       },
       events: {
          'onReady': onPlayerReady,
          'onStateChange' : onStateChange
       }
    });
}

function onPlayerReady(event) {event.target.playVideo();}
function onStateChange(evt){
   if (evt.data === YT.PlayerState.ENDED) {
       player.playVideo(); 
   }
}

如果将一般代码复制并粘贴在选项卡上的网址作为URL，则字幕可以正常工作，但是在由api自动生成的iframe中，字幕不起作用。

有人知道我的错误吗？ Api可能对我有错误或未知限制吗？

我已经阅读了几次文档，但是找不到关于我的问题的解释。

Answer 1

我注意到您已将autoplay值设置为1，并且在我的测试过程中，如果未将视频静音，则似乎无法自动播放。

我确实使用您的API设置创建了这个working jsfiddle，但不能确定问题是否出在您的特定videoId上，但是可以肯定的是:如果要自动播放视频，我认为您需要将mute值设置为0为使其工作。

同样，如果您检查要在API设置中使用的videoId是否带有字幕(以及要显示的语言)，该功能将非常有用。

我在您的API设置中所做的另一个更改是注释了width和height值-尽管这些值不是问题。

此示例中使用的videoId来自视频:

Descubre a S4G Consulting con nuestro #S4GMood

这是代码-只是您在这里看不到使用此代码，因为Stack Overflow对于播放YouTube视频有一定的限制...

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%',*/
    videoId: 'cpx2C13kAqw',
    playlist: 'cpx2C13kAqw',
    playerVars: {
      'autoplay': 1,
      'mute': 1,
      'controls': 0,
      'disablekb': 0,
      'fs': 0,
      'modestbranding': 0,
      'rel': 0,
      'hd': 1,
      'autohide': 0,
      'wmode': 'transparent',
      'showinfo': 0,
      'loop': 1,
      'cc_load_policy': 1,
      'cc_lang_pref': 'en',
      'iv_load_policy': 3
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onStateChange
    }
  });
}

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

function onStateChange(evt) {
  if (evt.data === YT.PlayerState.ENDED) {
    player.playVideo();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="player"></div>