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

javascript ipad video mobile-safari dom-events

12,665

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

12,665

Christoph

Updated on April 24, 2022

Comments

Christoph about 2 years

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?

Judah Gabriel Himango almost 12 years

He did offer a workaround. And hell, I upvoted him for the rant.
ppalmeida about 10 years

I share >> every single fck*ng day <<, the same rant. Thank you for your clear and incisive point about this matter.