title: An event to know when the HTML5 video is ready to played without black background
body: <p>I have videos, sounds and images in an application I am creating. To display videos , I am suing the "video for all" format. But the problem is , it takes time for the video to load. I have added all kinds of event handlers, <code>loadeddata</code> , <code>readystatechange</code>, <code>canplay</code> , <code>canplaythrough</code>, <code>loadedmetadata</code> everything I could possibly could have tried. But all events occur before I actually see the poster of the video(untll which the background is black) and when It actually is loaded practically. How do I get to know when the video is actually ready to be played ?( I mean ACTUALLY )</p>
  
  <p>The below function is called like this</p>
  
  <pre><code>$video = getVideoObj({
                      //'controls' : 'controls',
                      'width': '100%',
                      'height': '100%',
                      'mediaUrl': appSettings.is_dev ? devMediaUrl + 'video/' + videoname
                                      : appSettings.site_url + 'resolve_path/' + mediaFilesUuid   + '/media/video/' + videoname
                  }),
  
  
  
  getVideoObj = function (videoProperties) {
  
      var controlsText = (videoProperties.controls &amp;&amp; videoProperties.controls == "controls") ? "controls='" + videoProperties.controls + "'" : "",
          $video = $('&lt;video/&gt;', {
              'width': videoProperties.width,
              'height': videoProperties.height
          }),
          mp4Src = (videoProperties.mediaUrl).replace('mov', 'mp4'),
          $sourceMp4 = $('&lt;source/&gt;', {'src': mp4Src, 'type': 'video/mp4' }),
          webmSrc = (videoProperties.mediaUrl).replace('mov', 'webm'),
          $sourcewebm = $('&lt;source/&gt;', { 'src': webmSrc, 'type': 'video/webm'}),
          oggSrc = (videoProperties.mediaUrl).replace('mov', 'theora.ogv'),
          $sourceOgg = $('&lt;source/&gt;', {'src': oggSrc,'type': 'video/ogg' }),
          $object = $('&lt;object/&gt;', {
              'type': 'application/x-shockwave-flash',
              'data': 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf',
              'width': videoProperties.width,
              'height': videoProperties.height
          }),
          $param1 = $('&lt;param/&gt;', {
              'name': 'movie',
              'value': 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf'
          }),
          $param2 = $('&lt;param/&gt;', {
              'name': 'allowFullScreen',
              'value': 'true'
          }),
          $param3 = $('&lt;param/&gt;', {
              'name': 'wmode',
              'value': 'transparent'
          }),
          playlistObject = {
              'playlist': [
                  '', {
                      'url': '',
                      'autoPlay': false
                  }
              ]
          },
          $param4 = $('&lt;param/&gt;', {
              'name': 'flashVars',
              'config': playlistObject
          }),
          $img = $('&lt;img/&gt;', {
              'alt': 'Big Buck Bunny ',
              'src': 'http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',
              'width': videoProperties.width,
              'height': videoProperties.height,
              'title': 'No video playback capabilities, please download the video below'
          });
  
      if (controlsText !== "") {
          $video.attr("controls", controlsText);
      }
      var video = $video.get(0);
      video.addEventListener('loadeddata', function() {
          function checkLoad() {
              console.log("video.readyState ",video.readyState);
              if (video.readyState === 4) {
                  console.log("ready");
              } else {
                  setTimeout(checkLoad, 100);
              }
          }
          checkLoad();
      }, false);
      video.addEventListener("canplay", function () {
          console.log("Video can be played");
      }, false);
  
      video.addEventListener("loadedmetadata", function () {
          vLength = video.duration.toFixed(1);
          console.log(vLength);
      }, false);
  
      video.addEventListener("readystatechange", function () {
          console.log(video.readyState);
          if (videoreadyState ===4) {
              console.log("Ready state");
          }
      }, false);
  
      video.addEventListener('canplaythrough', function () {
          console.log("Can play through");
      }, false);
      video.addEventListener('load', function () {
          console.log("Loaded");
      }, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
  
      video.addEventListener('progress',function (e) {
          console.log('PROGRESS',e);
      },false);
      $object.append($param1, $param2, $param3, $param4, $img);
      $video.append($sourceOgg, $sourceMp4, $sourcewebm, $object);
      return $video;
  }
  </code></pre>