[whatwg] <video> ... <script> race condition

[Henri Sivonen]

On Fri, 2011-05-13 at 11:40 +0200, Philip Jägenstedt wrote:
> Problem:
> 
> <video src="video.webm"></video>
> ...
> <script>
> document.querySelector('video').oncanplay = function() {
>    /* will it run? */
> };
> </script>
> 
> In the above the canplay event can be replaced with many others, like  
> loadedmetadata and loadeddata. Whether or not the event handler has been  
> registered by the time the event is fired depends on how fast decoding is,  
> how fast the network is and how much "..." there is.
> 
> This is not new information, Simon Pieters wrote extensively about the  
> problem in  
> http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video/
> 
> The reason I write now is that in one of our projects this exact race  
> condition happens to be hit for http://html5demos.com/video which is where  
> the above code snippet comes from.
> 
> Does anyone have ideas about how to deal with this problem, which *is*  
> going to appear on many real-world pages?

<iframe src=foo.html></iframe>
<script>
document.querySelector('iframe').onload = function() {
   /* will it run? */
};
</script>
has the same problem. The solution is using the onload markup attribute
that calls a function declared in an earlier <script>:

<script>
function iframeLoaded() {
  /* It will run! */
}
</script>
<iframe src=foo.html onload=iframeLoaded()></iframe>

Separation of markup and event handlers is overrated.

-- 
Henri Sivonen
hsivonen at iki.fi
http://hsivonen.iki.fi/