Javascript – YouTube Player API: How to get duration of a loaded/cued video without playing it

durationjavascriptyoutubeyoutube-apiyoutube-javascript-api

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.

When I load this HTML page with a 15 second video clip, I get the following debug output:

state = 5 duration = -0.000025

When I hit the Play button, I get the following debug output:

state = 3 duration = 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&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>

Best Answer

Solution 1

You can use YouTube Data API to access most of the information about the video, including duration:

<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

When using jQuery you can use $.getJSON() to make things easier.

Solution 2

Seems like YouTube JavaScript API v3 allows you to get the correct duration inside the onYouTubePlayerReady() event. All you need to do is pass &version=3 when calling swfobject.embedSWF() method.

Demo here

Related Topic