demo at http://www.html5rocks.com/en/tutorials/video/basics/ don't work fails in Opera, canplay/preload issue.

Please describe the issue:

When a video element has the preload attribute set to metadata, Opera doesn't 
fire "canplay" until after the "play" event--when the play button is pushed. 
Because of this, some of the video + canvas demos

 at http://www.html5rocks.com/en/tutorials/video/basics/ don't work.

To reproduce, using Opera or Opera Next,
1) go to http://www.html5rocks.com/en/tutorials/video/basics/
2) navigate to demo below the "The only reason we are using two canvases is 
because the performance is much better than using a single one which imports 
the images and transforms at the same time." sentence, the second example in 
5.4. VIDEO + CANVAS.
3) click play on the video on the left

Expected Behavior:
The other two videos should start.

Actual Behavior:
They don't. If you click play a second time, it works.

Please provide any additional information below.

This seems like a site bug, rather than an Opera bug. The specification does 
not say what the default value of the preload attribute should be, but 
recommends "metadata" ( 
http://dev.w3.org/html5/spec/video.html#attr-media-preload ):
The attribute's missing value default is user-agent defined, though the 
Metadata state is suggested as a compromise between reducing server load and 
providing an optimal user experience.

And as for the event "canplay":
If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready 
state is HAVE_FUTURE_DATA

The user agent must queue a task to fire a simple event named canplay.

And state "HAVE_FUTURE_DATA":
HAVE_FUTURE_DATA (numeric value 3)
Data for the immediate current playback position is available, as well as 
enough data for the user agent to advance the current playback position in the 
direction of playback at least a little without immediately reverting to the 
HAVE_METADATA state. For example, in video this corresponds to the user agent 
having data for at least the current frame and the next frame. The user agent 
cannot be in this state if playback has ended, as the current playback position 
can never advance in this case.

Since the "metadata" preload value will not cause loading enough data to start 
playback, and it does not even force the browser to load the next frame, we 
never reach HAVE_FUTURE_DATA state and canplay event is never fired:

metadata    Metadata Hints to the user agent that the author does not expect the 
user to need the media resource, but that fetching the resource metadata 
(dimensions, first frame, track list, duration, etc) is reasonable.

The fix is pretty easy, though:

Just add preload="auto" to the video element, e.g., <video 
poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" 
id="video-canvas-fancy" preload="auto" controls>

Alternately, wrap the code of processEffectFrame() with: if (ctx_copy) {...}

Original issue reported on code.google.com by miketa...@gmail.com on 19 Apr 2012 at 3:03

baonlq / html5rocks

demo at http://www.html5rocks.com/en/tutorials/video/basics/ don't work fails in Opera, canplay/preload issue. #872