14 July 2010

Opera and the OGG video - source location matters

I've recently been working on implementing HTML5 video on a new web site. The challenge I ran into yesterday was to get the OGG video to display on Opera 10.54. Using the following error handler, I found out what the problem was, but couldn't get any closer to a solution:
 function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
alert('An unknown error occurred.');
Here's the video tag:
<video  id="vid-2" width="372" height="209" 
poster="global/img/farmfresh.jpg" controls
onPlaying="stopSlider()" >
<source class="source" src="global/vid/farmfresh.ogg" type='application/ogg'
<source class="source" src="global/vid/farmfresh.mov">
<source class="source" src="global/vid/farmfresh.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<img src="global/img/farmfresh2.jpg" title="North Carolina Farm Fresh: Monday, April 29 at 9:30 PM"/>
The problem was the location of the OGG source tag; for Opera, the OGG video has to be the first if you have multiple source elements. Now Opera is happy as well as the other browsers.

No comments: