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设置创建了这个工作jsfiddle，我不能确定问题是否与特定的videoId有关，但有一点是肯定的：如果你想自动播放视频，我认为你需要将值mute设置为0才能使其工作。

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

我在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>