Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event Listeners in HTML5 Video on the iPad Safari not working?

I've got this in the <head>:

<script>
      function log(event){
     var Url = "./log.php?session=<?php echo session_id(); ?>&event=" + event;

        xmlHttp = new XMLHttpRequest(); 
        xmlHttp.open( "GET", Url, true );
        xmlHttp.send( null );

    }
</script> 

And this in the <body>:

<video id="video" src="./video/LarryVideo.mp4" 
  controls="controls" 
  poster="./img/video_poster.jpg"
  onabort="log('onabort');"
  oncanplay="log('oncanplay');"
  oncanplaythrough="log('oncanplaythrough');"
  ondurationchange="log('ondurationchange');"
  onemptied="log('onemptied');"
  onended="log('onended');"
  onerror="log('onerror');"
  onloadeddata="log('onloadeddata');"
  onloadedmetadata="log('onloadedmetadata');"
  onloadstart="log('onloadstart');"
  onpause="log('onpause');"
  onplay="log('onplay');"
  onplaying="log('onplaying');"
  onprogress="log('onprogress');"
  onratechange="log('onratechange');"
  onreadystatechange="log('onreadystatechange');"
  onseeked="log('onseeked');"
  onseeking="log('onseeking');"
  onstalled="log('onstalled');"
  onsuspend="log('onsuspend');"
  ontimeupdate="log('ontimeupdate');"
  onvolumechange="log('onvolumechange');"
  onwaiting="log('onwaiting');">
    <script>
        QT_WriteOBJECT('./video/LarryVideo.mp4',
            '380px', '285px',           // width & height
            '',                         // required version of the ActiveX control, we're OK with the default value
            'scale', 'tofit',           // scale to fit element size exactly so resizing works
            'emb#id', 'video_embed',    // ID for embed tag only
            'obj#id', 'video_obj');     // ID for object tag only
    </script> 
</video>

My normal Safari creates nice log-file entries as expected. Mobile Safari from iPad however doesn't do anything at all.

What could be wrong with this?

like image 937
Christoph Avatar asked Jun 14 '10 14:06

Christoph


1 Answers

I have not been able to get a hold of readystate on an ipad either but you can get other events that more-or-less let you infer the readystate.

var audio = new Audio("someSource.mp3");
    audio.play(); 
 /* you may need to use .load() depending on how the event was initiated */
    audio.addEventListener("canplay", handleCanPlay, false);
    audio.addEventListener("durationchange", handleDurationChange, false);

But lets be clear, the problem is Apple pretty much telling the whole damn world they're using the internet wrong. Granted, everyone hates sites that start playing music the second they load but then Apple goes nuts and kills ANY/ALL buffering of audio/video that isn't explicitly initiated by a user gesture because Apple, apparently, thinks their users are too retarded to hit "back" if a site bothers them; fanboys agree too. This basically leaves the rest of us to hack the shit out of our applications if we dare try and manage any kind of sound effects. I know this isn't the place to rant...but i'll be damned if building ANY soft of interesting/interactive experience in HTML5 on the iPad isn't one facepalm after another...be it the 5mb cache limit that simply crashes the browser if a page has *too many (according to Apple) images or the difficulty to preload any sort of media to enhance UI - seriously, outside of wordpress blogs and rss readers, mobile Safari's implementation of HTML5 is pretty worthless. And so the dream of HTML5 "build once, play anywhere" value proposition is dead and we go back to deving native apps...at least this gives us good job security /rant

like image 79
Jason Avatar answered Oct 03 '22 02:10

Jason