Question

我想使用“Youtube iframe API”为Youtube视频添加字幕.Youtube播放器对象是使用iframe API创建的，为播放器列出了两个视频。

以下是我的示例代码：

<html>
<head>
<title>Video Player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    function Player(options) {  
        var defaults = {
            height: '250',
            width: '500',
            events: { 'onReady': null},
             cc_load_policy :1,
            playerVars: {
              modestbranding: 0,
              controls: 0, //remove controls
              showinfo: 0,
              version:2,
              enablejsapi : 1,
              iv_load_policy: 3,
              cc_load_policy :1
             }
          };

          var combinedOptions = $.extend(defaults, options);

          return {
            player: null,

            pause: function () {      
            this.player.pauseVideo();    
            },

            seek: function () {       
              //this.player.seekTo();          
            },

            destroy: function () {      
            this.player.destroy();    
            },

            changeVideo: function () {      
            this.player.stopVideo();    
            },

            onPlayerReady: function( a, b, c, d ) {
                myPlayer.player.playVideo();
                myPlayer.player.cuePlaylist({playlist:['u1zgFlCw8Aw','M7lc1UVf-VE'], startSeconds:0 });
            },

            onStateChange:function( a, b, c, d ){
            //myPlayer.player.seekTo(50);
            },

            init: function() {
            me = this;
            me.player = new YT.Player(combinedOptions.id, {
            height: combinedOptions.height,
            width: combinedOptions.width,
            events: {
                'onReady': this.onPlayerReady,
                'onStateChange': this.onStateChange
            }
            });
            }
        }
    };

    var myPlayer;
    function onYouTubeIframeAPIReady() {
        myPlayer = new Player({  
            id: 'divId',
            autoPlay: true,
            videoId: 'NeGe7lVrXb0',
        });
        myPlayer.init();
    }

    $(document).ready(function() {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    
    });


    function playPause()
    { 
        if (myPlayer.player.getPlayerState() == 1) 
          myPlayer.player.pauseVideo(); 
        else 
          myPlayer.player.playVideo(); 
    } 
    function addTime()
    { 
        var playerObj = myPlayer.player;
        var currentTime = playerObj.getCurrentTime();
        playerObj.seekTo(currentTime+10);
    } 

    function removeTime()
    { 
        var playerObj = myPlayer.player;
        var currentTime = playerObj.getCurrentTime();
        playerObj.seekTo(currentTime-10);
    } 
    function makeBig()
    { 
        me.player.a.width=600; 
        me.player.a.height=350; 
    } 

    function makeSmall()
    { 
        me.player.a.width=350; 
        me.player.a.height=200; 
    } 

</script>
</head>
<body>
<div style="text-align:center" >
<button onclick="playPause()">Play/Pause</button> 
<button onclick="removeTime()">10-</button>
<button onclick="addTime()">10+</button> 
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeBig()">Big</button>
<br> 
<div style="text-align:center" id="divId">
</div>
</body>
</html>

有任何帮助吗？提前谢谢......

Answer 1

未在API文档中描述，但此处

function textAreaAdjust(element) {
  element.style.height = "auto";
  element.style.height = (25 + element.scrollHeight) + "px";
}

Answer 2

据我所知，您无法从API加载自己的字幕。

Youtube iframe API仅允许您管理常规设置，例如是否显示CC按钮，以及是否默认显示CC。

字幕必须由视频的上传者提交。如果您可以控制YouTube上的视频，则可以在youtube上修改字幕。

如果您需要添加自己的字幕，可以考虑使用自己的播放器和captionator.js

Answer 3

为视频添加字幕的最佳解决方案（原始视频不存在）： 1先禁用对原始视频的“速度”控制的访问。 2秒钟，通过在播放的视频iframe顶部使用DOM添加标记层。根据视频时间间隔的三分之三，为每个场景添加字幕。

如何使用“Youtube Iframe API”为YouTube视频添加字幕

3 个答案: