13

我無法通過YouTube Player API的getDuration()方法獲得加載/提示視頻的正確視頻持續時間/長度(以秒爲單位);但是,一旦視頻開始播放,同樣的方法會返回有效值!想知道YouTube如何能夠展示加載/提示視頻的有效期。YouTube播放器API:如何獲取加載/提示視頻的播放時間而不播放?

當我加載此HTML頁面有15秒鐘的視頻剪輯,我得到下面的調試輸出:

狀態= 5時長= -0.000025

當我打的播放按鈕,我得到以下調試輸出:

狀態= 3持續時間= 15,

將不勝感激的溶液或一種解決方法。加載並立即播放和暫停播放器將不是我最喜歡的方法。

<html> 
<head> 
    <script type="text/javascript"> 
    var videoId; 
    videoId = 'http://www.youtube.com/v/4TSJhIZmL0A'; // bbc 
    // videoId = 'http://www.youtube.com/v/ezwyHNs_W_A'; // physics 

    function $(id) { 
     return document.getElementById(id); 
    } 
    </script> 

    <script src="http://www.google.com/jsapi"></script> 
    <script> 
    google.load("swfobject", "2.1"); 
    </script> 

</head> 

<body> 


    <table> 
    <tr><td> 
     <div id="player"> 
     You need Flash player 8+ and JavaScript enabled to view this video. 
     </div> 

    <script> 
     var ytplayer; 

     function myOnPlayerStateChange(state) { 
      switch(state) { 
      case 1: // playing 
       $("out").innerHTML += " playing"; 
       break; 
      case 2: // paused 
       $("out").innerHTML += " paused"; 
       break; 
      case 0: // ended 
       $("out").innerHTML += " ended"; 
       break;  

      case -1: // unstarted 
      case 3: // buffering 
      case 5: // cued 
       $("out").innerHTML += " state = " + state; 
       break; 
      default: // unknown 
       $("out").innerHTML += " state = " + state; 
       break; 
      } 

      $("out").innerHTML += " duration = " + ytplayer.getDuration() + ","; 
     } 

     function myOnPlayerError(errorCode) { 
      $("out").innerHTML += " Error occurred: " + errorCode; 
     } 

     function onYouTubePlayerReady(playerId) { 
      ytplayer = ytplayer || $(playerId); 
      ytplayer.addEventListener("onStateChange", "myOnPlayerStateChange"); 
      ytplayer.addEventListener("onError", "myOnPlayerError"); 
     } 

     var params = { allowScriptAccess: "always", bgcolor: "#cccccc" }; 
     var atts = { }; 

     swfobject.embedSWF(videoId + "?border=0&amp;enablejsapi=1&amp;playerapiid=" + 'player', 'player', 425, 344, "8", null, null, params, atts); 
    </script> 
    </td></tr> 
    </table> 
    <div id="out"></div> 
    <div id="err"></div> 
</body> 
</html> 
+0

不幸的是所有的答案已經因爲在YouTube API的谷歌禁用V2過時。 – Synetech 2015-12-31 01:41:58

回答

17

解決方案1 ​​

您可以使用YouTube數據API訪問大部分的有關視頻的信息,包括時間:

<script type="text/javascript"> 
    function youtubeFeedCallback(json){ 
     document.write(json["data"]["duration"] + " second(s)"); 
    } 
</script> 
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/4TSJhIZmL0A?v=2&alt=jsonc&callback=youtubeFeedCallback&prettyprint=true"></script> 

Demo here

當使用jQuery時,您可以使用$.getJSON()讓事情變得更輕鬆。

解決方案2

看起來像YouTube的JavaScript API V3可以讓你獲得onYouTubePlayerReady()事件中的正確時間。當您撥打swfobject.embedSWF()方法時,您需要做的就是通過&version=3

Demo here

+0

您的解決方案2演示在此處沒有給出正確的持續時間。警報仍顯示爲0.但是,當我在演示頁面上播放視頻時,關閉該選項卡並重新打開它,警報_does_顯示正確的持續時間。 – ShinNoNoir 2011-08-03 07:28:43

+0

@ShinNoNoir:其實我不確定我自己。文檔不清楚是否在加載元數據之前或之後觸發onYouTubePlayerReady。您可以嘗試添加2秒的延遲。 – 2011-08-03 08:19:21

+1

修改我的舊評論,似乎現在的解決方案2確實有效。如果您在'playerVars'中設置'version = 3',它似乎也適用於iframe YouTube API。 – ShinNoNoir 2012-07-19 21:26:07

2

「加載並立即播放和暫停播放器將不是我最喜歡的方法。」

我不認爲有任何其他方法。

在我的情況下,即使對於衛星互聯網用戶,它也能正常工作。

這裏是我的代碼:

// I set youtube player-ready event to a variable for irrelevant reasons 
function onYouTubePlayerReady(playerid) { 
    youtube_player_ready; 
} 
youtube_player_ready = function(playerid) { 

    // load video 
    document.getElementById(playerid).cueVideoById(yt_video_id); 
    // mute video 
    document.getElementById(playerid).mute(); 
    // play video to get meta data 
    document.getElementById(playerid).playVideo(); 

    yt_get_duration[index] = function(){ 
     // if duration is available 
     if (document.getElementById(playerid).getDuration() > 0) { 
      // pause video 
      document.getElementById(playerid).pauseVideo(); 
      // unmute 
      document.getElementById(playerid).unMute(); 
      // save duration 
      video_duration = document.getElementById(playerid).getDuration(); 

     } 
     // else keep trying 
     else { 
      setTimeout(yt_get_duration[index], 150) 
     } 
    } 
    // get duration 
    yt_get_duration[index](); 

} 
0

使用jQuery

var youTubeURL = 'http://gdata.youtube.com/feeds/api/videos/oHg5SJYRHA0?v=2&alt=json'; 
var json = (function() { 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': youTubeURL, 
     'dataType': "jsonp", // necessary for IE9 
     crossDomain: true, 
     'success': function (data) { 
      var duration = data.entry.media$group.yt$duration.seconds; 
     } 
    }); 
})(); 
2

這裏一個在轉換時間爲您服務。

<script type="text/javascript"> 
function youtubeFeedCallback(json){ 

var totalSec = json["data"]["duration"]; 
var hours = parseInt(totalSec/3600) % 24; 
var minutes = parseInt(totalSec/60) % 60; 
var seconds = totalSec % 60; 

var result = (hours < 1 ? "" : hours + ":") + (minutes < 1 ? "0" : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); 

document.write(result); 
} 
</script> 
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/LzPWWpKlvqQ?v=2&alt=jsonc&callback=youtubeFeedCallback&prettyprint=true"></script> 
3

按照下列步驟操作:
1.獲取YouTube視頻ID
2.使用YouTube API來獲取持續時間(ISO 8601持續時間)
3。轉換ISO 8601持續時間

使用jQuery:

// convert ISO 8601 duration 
function covtime(youtube_time){ 
    array = youtube_time.match(/(\d+)(?=[MHS])/ig)||[]; 
    var formatted = array.map(function(item){ 
     if(item.length<2) return '0'+item; 
     return item; 
    }).join(':'); 
    return formatted; 
} 

// print video duration 
$('iframe').each(function(i) { 
    var ifr = $(this); 
    var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; 
    var match = ifr.attr('src').match(regExp); // get youtube video id 
    if (match && match[2].length == 11) { 
     var youtubeUrl = "https://www.googleapis.com/youtube/v3/videos?id=" + match[2] 
     + "&key=AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw&part=snippet,contentDetails"; 
     $.ajax({ 
      async: false, 
      type: 'GET', 
      url: youtubeUrl, 
      success: function(data) { 
       var youtube_time = data.items[0].contentDetails.duration; 
       var duration = covtime(youtube_time); 
       if(ifr.next().is('.time')) { 
       ifr.next().html(duration); 
       } 
      } 
     }); 
    } 
}); 
+0

非常感謝:) – 2017-10-12 04:40:17

相關問題