Not interested in the explanation? Go straight to the example.
Current best practice
Current best practice is to use SWFObject to write a player like the JW FLV Media Player or Flow Player. Both of these are Flash players so if users don’t have Flash or JavaScript they get no video. Web authors can offer alternative HTML content through this method but it has always felt clunky.
A shiny new element
Enter HTML 5 and the video element. No need to use a third party player - video is available within the HTML specification. Here’s how you would add a video to your page:
1 2 3 | |
The following attributes are available:
- src
- The gives the address of the video
- poster
- This gives the address of an image to show when video data is not available
- autobuffer
- This hints to the user agent that the content is likely to be used
- autoplay
- This auto starts the video
- loop
- This will loop the video
- controls
- Choose whether to show video controls or not
- width
- The width of the video
- height
- The height of the video
Issues
There are ongoing issues that need to be resolved, not least of which is browser support. Currently Firefox supports the ogg codec whilst Safari supports h.264. Opera is also supporting the .ogg format. Secondly anyone who has worked with videos will understand the plethora of codecs. Some of these are open formats, others are proprietary. For the proprietary codecs browser vendors will need to decide whether to fork out for expensive licenses or just support open codecs. Finally the accessibility question needs to be addressed. Should accessibility be embedded in the browser player (subtitles, transcript) or should this be handled another way?
Likely to be a while
Ubiquitous support for the video element is likely to be a long way off but at some point using video on a site is going to be much easier and developers won’t need to rely on third party players - it will be part of the browser.