HTML5 audio is created with the <audio> tag.
<audio controls preload="none"> <source src="assets/ audio1.mp3" type= "audio/ mpeg"> <source src= "assets/ audio1.ogg" type= "audio/ ogg"> </audio>
The controls attribute will display the browser's default audio controls. Include the loop attribute to make the audio play continuously. The browser will choose the first <source> file that it knows how to play. It is also possible to embed a Flash back-up inside the <audio> tag below the last <source> tag.
Use the open-source program Audacity to create the various file formats.
W3C has a great demonstration of video events, properties, and methods.
Native support for the various video containers (i.e. No need to install a plug-in.)
| Container (video codec) | MS IE9 (Trident) | Safari (Webkit) | Firefox (Gecko) | Chrome (Webkit) | Opera (Presto) Although, Opera will be switching to webkit soon. |
|---|---|---|---|---|---|
| MP4 (H.264, patented) | X | X | X | ||
| OGG (Theora, royalty-free) | X | X | X | ||
| WebM (VP8, royalty-free) I think this video format is dying a slow death. I don’t bother with it anymore. | X | X | X |
HMTL5 video is done the same way as <audio>.
<video controls preload="none"> <source src="assets/ShortVideoTest.mp4" type="video/mp4"> <source src="assets/ShortVideoTest.webm" type="video/webm"> <source src="assets/ShortVideoTest.ogv" type="video/ogg"> </video>
Due to a bug in iOS, you should always place mp4 first. Then it may be best to go webm, and ogv.
The Audio and Video tags expose an API you can hook into for controlling the media if you do not want to use the brower’s native transport buttons. Use code similar to this:
var myAudio = document.getElementsByTagName('audio')[0];
document.getElementById('btnPause').onclick = function() {
myAudio.pause();
};
document.getElementById('btnPlay').onclick = function() {
myAudio.play();
};
document.getElementById('btnRewind').onclick = function() {
myAudio.currentTime = 0;
myAudio.play();
};
The most important thing to remember is to make sure your server is serving video files with the correct MIME type in the Content-Type header. If not, videos might not work properly, even if they were working on a local copy of your site. In an Apache httpd.conf it's enough by adding these lines:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
Some web hosts, in trying to save bandwidth, gzip everything by default—including video files! In Firefox and Opera, seeking will not be possible or the video may not play at all if a video file is gzipped. If this is occurring to you please check your server / hosts and disable the gzipping of Ogg and other media files. You can switch off gzipping for video files in your .htaccess file by adding this line:
SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary
You can use VLC to convert to OGV (theora) video, but sometimes the quality isn't very good. It is very fast however. Otherwise, try Firefogg with these settings:
video bit rate=512
vid quality=blank
audio quality=1.0
mono
Handbrake can also be used to make conversions to h.264, but be sure to check the "web optimized" checkbox to allow the video to load progressively.
There doesn’t ever seem to be a problem with OGG Video files, but h.264 videos have wasted me a lot of time. The videos can be encoded with file information at the beginning of the file, or at the end. If that information is at the end, then the entire video must be downloaded before it will begin playing. On the other hand, pushing that data (A separate “hint” track is used to include streaming information in the file.) to the beginning of the file will allow for progressive download.
This is also a good time to define progressive download and streaming video. The terms are often, in error, used interchangably. With streaming video, it is possible to jump to a specific location in the video and dynamically alter the bit-rate depending on the internet connection speed. It takes a dedicated video server and specialized software to offer true streaming video. Leave that to the pros.
For a small-business or hobbyist website, progressive downloading is what you want. The video will start at the beginning, and will start to play just as soon as there is enough frames in the buffer to allow smooth playback.
Miro is a free video converter for the Mac but it is too simple to use; there are no settings for tweaking the conversion.
There is a F4V Post Processor and FLVCheck tool from Adobe that might be able to fix some playback problems if you are having troubles with your F4V file.
I have tried several solutions, but the easiest and most robust method is the MediaElement solution. Highly recommended.