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

Henri Sivonen hsivonen at iki.fi
Fri May 13 03:25:39 PDT 2011

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>
document.querySelector('iframe').onload = function() {
   /* will it run? */
has the same problem. The solution is using the onload markup attribute
that calls a function declared in an earlier <script>:

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

Separation of markup and event handlers is overrated.

Henri Sivonen
hsivonen at iki.fi

More information about the whatwg mailing list