javascript - 如何使用 "Youtube Iframe API "将字幕添加到 YouTube 视频

标签 javascript iframe youtube

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

有什么帮助吗? 提前致谢...

最佳答案

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

this.player.loadModule("captions");

关于javascript - 如何使用 "Youtube Iframe API "将字幕添加到 YouTube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21798398/

相关文章:

javascript - 在不同的方法中使用时变量是 "undefined"?

javascript - 在 reducer 中调度调度

javascript - 如何从父级调用 iframe 的功能?

YouTube 直播 RTMP 网址

video - 如何从像YouTube这样的视频ID的openload.io视频中获取缩略图

youtube - 从Google+相册-to- YouTube channel 导入视频

javascript - 创建用于添加内容的循环

javascript - 使用延迟对象捕获分离失败

javascript - Google 标签管理器错误 sumome iframe

javascript - 如何在 designmode=on 中保护 HTML 元素