cc_load_policy如何在youtube iframe Player API中显示字幕?

时间:2019-02-11 10:37:18

标签: javascript youtube youtube-api youtube-javascript-api

我正在尝试使用youtube API-iframe播放器的'cc_load_policy'参数。而且我无法使其在我的页面上正常工作。

如您所见,我将cc_load_policy指示为1,以便始终显示字幕,而cc_lang则以“ 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可能对我有错误或未知限制吗?

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

1 个答案:

答案 0 :(得分:0)

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


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

如果您检查要在API设置中使用的videoId带有字幕(以及您要显示的语言),也会很有用。

我在API设置中进行的另一项更改是注释了widthheight值-不过这些值不是问题。

此示例中使用的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>