API проигрывателя YouTube: как получить продолжительность загруженного видео без его воспроизведения?

Я не могу получить правильную продолжительность/длину видео (в секундах) загруженного/отмеченного видео с помощью метода getDuration() API YouTube Player; однако тот же метод возвращает действительное значение, как только видео начинает воспроизводиться! Интересно, как YouTube может показывать действительную продолжительность загруженного/отмеченного видео.

Когда я загружаю эту HTML-страницу с 15-секундным видеоклипом, я получаю следующий вывод отладки:

состояние = 5, продолжительность = -0,000025

Когда я нажимаю кнопку Play, я получаю следующий вывод отладки:

состояние = 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>

person Harry    schedule 18.01.2010    source источник
comment
К сожалению, все ответы устарели, поскольку Google отключил V2 API YouTube.   -  person Synetech    schedule 31.12.2015


Ответы (5)


Решение 1

Вы можете использовать YouTube Data 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>

Демо здесь

При использовании jQuery вы можете использовать $.getJSON(), чтобы упростить задачу.

Решение 2

Похоже, YouTube JavaScript API v3 позволяет вам получить правильную продолжительность внутри события onYouTubePlayerReady(). Все, что вам нужно сделать, это передать &version=3 при вызове метода swfobject.embedSWF().

Демо здесь

person Salman A    schedule 22.06.2011
comment
В вашей демонстрации решения 2 не указана правильная продолжительность. Предупреждение по-прежнему показывает 0. Однако, когда я воспроизвожу видео на вашей демонстрационной странице, закрываю вкладку и снова открываю ее, предупреждение действительно показывает правильную продолжительность. - person ShinNoNoir; 03.08.2011
comment
@ShinNoNoir: на самом деле я сам не уверен. В документации не ясно, запускается ли onYouTubePlayerReady до или после загрузки метаданных. Вы можете попробовать добавить 2-секундную задержку. - person Salman A; 03.08.2011
comment
Пересматривая мой старый комментарий, кажется, что в настоящее время решение 2 действительно работает. Это также работает для iframe YouTube API, если вы установите version=3 в playerVars. - person ShinNoNoir; 20.07.2012
comment
Хм, к сожалению, getDuration() работает только в решении 2 для самого первого видео. После перехода к другому видео вызовы getDuration() могут снова вернуть 0. Пример: jsfiddle.net/5p5sq - person ShinNoNoir; 20.07.2012
comment
К сожалению, использование gdata.youtube.com может быть проблематичным, поскольку Chrome блокирует доступ к нему как к небезопасному, поэтому вы не можете написать пользовательский скрипт, чтобы, например, добавить длину видео на страницу, чтобы люди могли видеть длину, даже если Flash отключен или настроен на щелчок. -играть. И второй (V3) метод не работает, если видео не загружено. :-( - person Synetech; 04.06.2014

Выполните следующие действия:
1. Получите идентификатор видео YouTube
2. Используйте API 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);
              }
            }
        });
    }
});
person Mr.Zon    schedule 20.05.2017

«Загрузка и немедленное воспроизведение и пауза в плеере — не мой любимый метод».

Я не думаю, что есть какой-то другой метод.

В моем случае это работает хорошо, даже для пользователя спутникового интернета.

Вот мой код:

// 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]();

}
person Wolf_Larsen    schedule 22.02.2011

Вот тот, который преобразует время для вас.

    <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>
person LastEnd    schedule 23.10.2014

Использование 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;
        }
    });
})();
person mhenry1384    schedule 21.07.2013