时间戳

首页 > 解决方案 > cc_load_policy 如何在 youtube iframe Player API 中工作以显示字幕？

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

问题描述

我正在尝试使用 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 会对我有错误或未知限制吗？

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

标签： javascriptyoutubeyoutube-apiyoutube-javascript-api

解决方案

我注意到您已将autoplay值设置为，1并且在我的测试期间，如果视频未静音，自动播放似乎不起作用。

我确实使用您的 API 设置创建了这个工作 jsfiddle，我不能确定问题是否与您的特定问题有关，videoId但是有一点是肯定的：如果您想自动播放视频，我认为您需要将值设置mute为0for make这行得通。

此外，如果您检查videoId要在 API 设置中使用的是否有字幕（以及您打算显示的语言） ，这将很有用。

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

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

描述 S4G 咨询知识#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>

推荐阅读