API do Player do YouTube: Como obter a duração de um vídeo carregado/cued sem reproduzi -lo?
-
21-09-2019 - |
Pergunta
Não consigo obter a duração/comprimento de vídeo correta (em segundos) de um vídeo carregado/cued através do método getDuration () da API do YouTube Player; O mesmo método, no entanto, retorna um valor válido quando o vídeo começa a ser reproduzido! Quer saber como o YouTube é capaz de mostrar a duração válida de um vídeo carregado/cued.
Quando carrego esta página HTML com um videoclipe de 15 segundos, recebo a seguinte saída de depuração:
estado = 5 duração = -0,000025
Quando aperto o botão Play, recebo a seguinte saída de depuração:
estado = 3 duração = 15,
Apreciaria muito uma solução ou uma solução alternativa. Carregar e jogar imediatamente e pausar o jogador não seria o meu método favorito.
<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>
Solução
Solução 1
Você pode usar a API de dados do YouTube para acessar a maioria das informações sobre o vídeo, incluindo duração:
<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>
Ao usar o jQuery, você pode usar $.getJSON()
para facilitar as coisas.
Solução 2
Parece que o YouTube JavaScript API V3 permite que você obtenha o correto duração dentro do onYouTubePlayerReady()
evento. Tudo que você precisa fazer é passar &version=3
Ao ligar swfobject.embedSWF()
método.
Outras dicas
Seguindo estas etapas:
1. Obtenha o ID de vídeo do YouTube
2. Use a API do YouTube para obter duração (duração ISO 8601)
3. Converta a duração da ISO 8601 ao tempo
Usando 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);
}
}
});
}
});
"Carregar e jogar imediatamente e fazer uma pausa no jogador não seria meu método favorito".
Eu não acho que exista outro método.
No meu caso, funciona bem, mesmo para um usuário de Internet via satélite.
Aqui está o meu código:
// 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]();
}
Aqui um que converte o tempo para você.
<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>
Usando 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;
}
});
})();