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

【问题标题】：How to add Captions to YouTube videos using " Youtube Iframe API "如何使用“Youtube Iframe API”为 YouTube 视频添加字幕
【发布时间】：2014-03-14 22:30:38
【问题描述】：

我想使用“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>

有什么帮助吗？提前谢谢...

【问题讨论】：

标签： javascript iframe youtube

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

API 文档中没有描述，但在这里

this.player.loadModule("captions");

【讨论】：

【解决方案3】：

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

【讨论】：