HTML5 video and audio tags are under the spotlights right now.
They are supposed to be THE solution to display medias on all devices without relying on third party plug-ins like Flash.

In this article, we will not discuss about the many issues to deal with video and audio containers and codecs. We just want to know if it is possible to use the video and audio tags out in the real world on mobile devices.

What does the W3C tell us?

About the video tag:
“A video element is used for playing videos or movies, and audio files with captions.
Content may be provided inside the video element. User agents (read “browsers”) should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.”

About the audio tag:
“An audio element represents a sound or audio stream.
Content may be provided inside the audio element. User agents should not show this content to the user; it is intended for older Web browsers which do not support audio, so that legacy audio plug-ins can be tried, or to show text to the users of these older browsers informing them of how to access the audio contents.”

Developers can also set attributes such as:

• poster: to define an image file that the browser can show while no video data is available
• controls: to enable controls of the media

What did we test ?

We created statics HTML pages with the following :

The video tag

The html :

<video controls="controls" poster="video-poster.jpg">
   <source src="vp8_1280x720.webm" type="video/webm;" />
   <source src="h264_qvga.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
   <source src="h263_176x144.3gp" type="video/3gp; codecs='h263, amr'" />
   Video not supported
</video>


What we are testing :

• Controls should be displayed (at least, the video can be played when clicking on the poster)
• The specified poster is displayed
• Three common videos formats are listed : webm, mp4 and 3gp. The browser should pick up the formats that it is able to play
• The text “Video not supported” should be displayed when the video tag cannot be interpreted

The audio tag

The html :

<audio controls="controls">
   <source src="music.aac" type="audio/x-aac"/>
   <source src="auto.mp3" type="audio/mpeg"/>
   Audio not supported
</audio>


What are we testing:

• Controls should be displayed (at least, the audio file can be played)
• Two common audio formats are listed : aac and mp3. The browser should pick up the formats it is able to play
• The text “Audio not supported” should be displayed when the audio tag cannot be interpreted

Tests results on devices

Case studies results

From our tests with real devices, we came up with those three distinct cases:

1. It works as expected

It means that either the video or audio is played or the fallback text is displayed.
Most of the devices we have been testing fall in this case.

2. It works almost as expected

Devices are supposed to choose between the different source tags you specify in the video or audio tag. This is a great feature because the browser will not download media file if it is not able to play it and should fallback to the next source.

In practice we noticed that some mobile browsers (like Android prior to 2.3 or iOS prior to 4) didn’t go down the list if the first source tag contains a media file not supported.

The workaround consists of sending only one media (which you know its format can be played on the targeted browser).
Ex :

<video src="vp8_1280x720.webm" controls="controls" poster="video-poster.jpg" />


3. It completely fails

In this case, the browser is not able to play any media files and does not display the fallback text.

The Blackberry 9800 (OS 6) is an interesting use case. This device displays the video tag as a big blank space the size of the video. It clearly fails to play a video. To find out if this browser was supposed to support this HTML5 tag, we run the http://html5test.com/ test with the device. The answer was Yes, it does support the video tag.
This test uses Javascript techniques to check whether the browser supports a certain tag.
In this case, we can conclude that, although it works in most cases, this technique is not as accurate as the good old manual test.

Conclusion

So, is it possible to use the video and audio tags out in the real world on most mobile devices?

Well, the strict answer is no. You will still need to use some tricks if you want your media to be played on devices others than the very new ones.

The good news is that the vast majority of mobile device will play mp4, 3gp video formats and aac, mp3 audio formats. That’s easier to handle than the many more various formats supported or not supported by web browsers!

Some resources:

• http://diveintohtml5.info/video.html
• http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2