cc_load_policy 如何在 youtube iframe Player API 中显示字幕？答案

【问题标题】：How does cc_load_policy work in youtube iframe Player API to show subtitles?cc_load_policy 如何在 youtube iframe Player API 中显示字幕？
【发布时间】：2019-02-11 10:37:18
【问题描述】：

我正在尝试使用 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(); 
   }
}

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

有人知道我的错误是什么吗？ Api 是否会对我有错误或未知限制？

我已多次阅读文档，但找不到问题的解释。

【问题讨论】：

您能分享一下您正在使用的videoId 吗？ - 我将根据我的发现发布答案...
我的 videoId 是 cpx2C13kAqw
Victor，检查我在答案中添加的 jsfiddle。它按预期工作。你还有这个问题吗？
感谢您的回答，它们很有用。我认为错误是由于 autoinicio 问题，因为如果我不启动该参数并且静音正常工作。

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

【解决方案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>

【讨论】：