Javascript YouTube Player API：如何在不播放的情况下获取加载/提示视频的持续时间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2086260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
YouTube Player API: How to get duration of a loaded/cued video without playing it?
提问by Harry
I'm not able to get the correct video duration/length (in seconds) of a loaded/cued video via the getDuration() method of the YouTube Player API; the same method, however, returns a valid value once the video starts playing! Wondering how YouTube is able to show the valid duration of a loaded/cued video.
我无法通过 YouTube Player API 的 getDuration() 方法获得加载/提示视频的正确视频时长/长度（以秒为单位）；但是，相同的方法会在视频开始播放后返回一个有效值！想知道 YouTube 如何能够显示加载/提示视频的有效持续时间。
When I load this HTML page with a 15 second video clip, I get the following debug output:
当我用 15 秒的视频剪辑加载这个 HTML 页面时，我得到以下调试输出：
state = 5 duration = -0.000025
状态 = 5 持续时间 = -0.000025
When I hit the Play button, I get the following debug output:
当我点击播放按钮时，我得到以下调试输出：
state = 3 duration = 15,
状态 = 3 持续时间 = 15，
Would greatly appreciate a solution or a workaround. Loading, and immediately playing and pausing the player would be not my favorite method.
非常感谢解决方案或解决方法。加载、立即播放和暂停播放器不是我最喜欢的方法。
<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&enablejsapi=1&playerapiid=" + 'player', 'player', 425, 344, "8", null, null, params, atts);
</script>
</td></tr>
</table>
<div id="out"></div>
<div id="err"></div>
</body>
</html>
回答by Salman A
Solution 1
解决方案1
You can use YouTube Data API to access most of the information about the video, including duration:
您可以使用 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>
When using jQuery you can use $.getJSON()to make things easier.
使用 jQuery 时，您可以$.getJSON()使事情变得更容易。
Solution 2
解决方案2
Seems like YouTube JavaScript API v3 allows you to get the correctduration inside the onYouTubePlayerReady()event. All you need to do is pass &version=3when calling swfobject.embedSWF()method.
似乎 YouTube JavaScript API v3 允许您在事件中获得正确的持续时间onYouTubePlayerReady()。您需要做的就是&version=3在调用swfobject.embedSWF()方法时传递。
回答by Mr.Zon
Following these steps:
1. Get youtube video id
2. Use youtube API to get duration (ISO 8601 duration)
3. Convert ISO 8601 duration to time
遵循以下步骤：
1. 获取 youtube 视频 ID
2. 使用 youtube API 获取持续时间（ISO 8601 持续时间）
3. 将 ISO 8601 持续时间转换为时间
Using Jquery:
使用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);
}
}
});
}
});
回答by LastEnd
Here one that converts the time over for you.
这里有一个可以为你转换时间的。
<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>
回答by Wolf_Larsen
"Loading, and immediately playing and pausing the player would be not my favorite method."
“加载，立即播放和暂停播放器不是我最喜欢的方法。”
I don't think there is any other method.
我认为没有其他方法。
In my case it works well, even for a satellite internet user.
就我而言，它运行良好，即使对于卫星互联网用户也是如此。
Here is my code :
这是我的代码：
// 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]();
}
回答by mhenry1384
Using jQuery
使用 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;
}
});
})();
