2014-02-15 39 views
2

我要添加字幕使用YouTube視頻YouTube視頻「的Youtube的iFrame API」 .Youtube參與者目標是iframe API創建,列出了兩個視頻的播放器。如何添加字幕使用「的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> 

任何幫助嗎? 在此先感謝...

回答

0

據我所知,你不能從API加載自己的字幕。

的Youtube API的iframe只允許你管理的常規設置,如顯示或不CC按鈕,如果顯示默認或不CC。

字幕必須通過視頻的上傳者。如果能夠控制YouTube上的視頻,則可以在YouTube上編輯標題。

如果需要添加自己的字幕,你可以考慮用自己的播放器和captionator.js

API文檔中沒有描述
1

,但這裏

this.player.loadModule("captions");