javascript - 通过 YouTube Player API 处理字幕

Question

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

编辑:Adding one image example of the settings I want to handle with.

这是整个脚本: (在使用背景之前，我已经在 onPlayerReady(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

你看过这个教程吗？
youtube

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

 <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);
}