HTML5 Video
HTML5 supports the <video> element, allowing you to add a video player to your web page easily without the need for any plugins. The video element is supported by pretty much any browser that supports HTML5. The most basic version of the video element looks like this:
The example above embeds a video file (in the webm format) but it doesn't do much else. You can also specify:
- A poster frame. This points to a file that is shown while the video is loading. If no poster is specified, the first frame of the video is used.
- Controls. Simply include the word "controls" to add play/pause buttons, volume, etc.
- Width & height in pixels.
In a perfect world this would be all the code you need to get started, and hopefully one day it will be, but in the meantime there's a small problem...
The main disadvantage of HTML5 video is that there is currently no single video format that works in all browsers. This means that you'll need to encode at least two versions of each video to ensure that it can be seen in all browsers. The recommended formats are webm, ogv and h.264 (mp4).
To include multiple file options, use the <source> element, which allows you to specify more than one video file:
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<source src='video.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'/>
<p>This content is displayed by browsers that don't recognize the video element.</p>
</video>
- The browser will attempt to play the first file; if that fails it tries the second file, and so forth. You can list as many as you like.
- The type attribute tells the browser what format the file is.
- The optional codecs attribute provides specific information about the codec.
Once you have created a simple video player, you can choose to move on to more advanced options such as creating custom controls, playlists, etc. This typically involves more HTML as well as JavaScript and CSS. We don't currently have any more tutorials available but if there's enough demand we can make it happen.