API لاعب YouTube: كيف تحصل على مدة مقطع فيديو محمّل/محمّل دون تشغيله؟
-
21-09-2019 - |
سؤال
أنا غير قادر على الحصول على مدة/طول الفيديو الصحيحة (بالثواني) من مقطع فيديو تم تحميله/cued عبر طريقة getDuration () من واجهة برمجة تطبيقات مشغل YouTube ؛ ومع ذلك ، فإن نفس الطريقة تُرجع قيمة صالحة بمجرد بدء تشغيل الفيديو! أتساءل كيف أن YouTube قادر على إظهار المدة الصحيحة لمقطع فيديو تم تحميله/cued.
عندما أقوم بتحميل صفحة 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&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>
المحلول
الحل 1
يمكنك استخدام واجهة برمجة تطبيقات بيانات YouTube للوصول إلى معظم المعلومات حول الفيديو ، بما في ذلك المدة:
<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>
عند استخدام jQuery يمكنك استخدامه $.getJSON()
لجعل الأمور أسهل.
الحل 2
يبدو أن YouTube JavaScript API V3 يتيح لك الحصول على صحيح المدة داخل onYouTubePlayerReady()
حدث. كل ما عليك فعله هو المرور &version=3
عند الاتصال swfobject.embedSWF()
طريقة.
نصائح أخرى
اتباع هذه الخطوات:
1. احصل على معرف فيديو YouTube
2. استخدم واجهة برمجة تطبيقات YouTube للحصول على المدة (مدة 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);
}
}
});
}
});
"التحميل ، واللعب على الفور وإيقاف اللاعب لن يكون طريقتي المفضلة."
لا أعتقد أن هناك أي طريقة أخرى.
في حالتي ، يعمل بشكل جيد ، حتى بالنسبة لمستخدم الإنترنت عبر الأقمار الصناعية.
ها هو رمزتي:
// 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]();
}
هنا واحد يحول الوقت لك.
<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>
باستخدام 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;
}
});
})();