通过 YouTube 播放器 API 处理字幕

Question

我正在尝试通过javascript更改Youtube视频标题颜色和背景，但没有成功。我正在使用本指南 http://terrillthompson.com/blog/648 和Youtube的参考 https://developers.google.com/youtube/iframe_api_reference

编辑：添加一个我想要处理的设置的图像示例。

这是所有整个脚本：（在使用背景之前，我已经尝试了在PlayerReady（event）函数上的颜色，如下所示）

<script src="http://www.youtube.com/player_api"></script>
<script>   
    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '800',
          width: '518',
          videoId: 'DHPWtmZ3USs',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          },
          playerVars: {
                cc_load_policy: 1,
                fs: 1,
                controls: 0,
                showinfo: 0,
                autoplay: 0,
                rel: 0,
                hl: 'pt-br',
                color: 'white'
        }
        });
    }
        function onPlayerReady(event) {
            player.getOptions("captions") || player.getOptions("cc")  //detects if captions were ever loaded at one point.
            player.setOption("captions", "displaySettings", {"background": "#fff"});  //Works for html5 ignored by AS3
            player.setOption("cc", "displaySettings", {"background": "#fff"});  //Works for AS3 ignored by html5
        }
    // when video ends
    function onPlayerStateChange(event) {        
        if (event.data == YT.PlayerState.PLAYING) {
                $('#videoshadow').addClass('on');
            }
            else if (event.data == YT.PlayerState.PAUSED) {
                $('#videoshadow').removeClass('on');
            }
            else if (event.data == YT.PlayerState.ENDED) {
                $('#videoshadow').removeClass('on');
            }               
    }
</script>

和 html：

<div id="player"></div>

我在网上找不到更多关于这个的信息。感谢您的帮助！

Answer 1

你看过本教程吗？优酷

这是一个改变边界的小代码...这是你想要的吗？

 <iframe id="video"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 50px #37474F"></iframe>

和一个脚本：

var tag2 = document.createElement('script');
tag2.id = 'iframe-demo';
tag2.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag2 = document.getElementsByTagName('script')[0];
firstScriptTag2.parentNode.insertBefore(tag2, firstScriptTag2);
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
});
}
function onPlayerReady(event) {
  document.getElementById('video').style.borderColor = '#FF6D00';
}
function changeBorderColor(playerStatus) {
  var color;
  if (playerStatus == -1) {
  color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
  color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
  color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
  color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
  color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
  color = "#FF6DOO"; // video cued = orange
}
if (color) {
  document.getElementById('video').style.borderColor = color;
}
}
function onPlayerStateChange(event) {
  changeBorderColor(event.data);
}