Web video
Video and Audio formats for web
| Royalty Free | Patented | |
|---|---|---|
| Codec & containers | Theora(video) + Vorbis(audio) > .ogv | H.264 (video) + AAC or MP3 (audio) > .mp4 |
| Browsers | Firefox, Chrome, Opera | Internet Explorer, Chrome, Safari |
video codecs and containers explained
Video files such as .avi .mp4 .ogv .mkv are container formats.
Like a .zip file which contains other files within it, video container formats define how to store video and audio streams within them. [2]
Each video container allow specific audio and video codecs.
A codec defines the way (the algorithm) by which a audio or video stream is encoded and decoded. [3]
More on video codecs <reg name="codecs"> H264 (video):
- can be embedded in .mp4 container
- is patent-encumbered
Theora (video):
- can be embedded in any codec, but is most common in .ogv container
- royalty-free
MP3 (audio):
- number of channels: 1 or 2
- possible bitrates: 64 kbps, 128 kbps, 192 kbps
- is patent-encumbered
- Also known as MPEG-1 Audio Layer 3.
AAC (audio)
- Also known as Advanced Audio Coding
- number of channels: up to 48
- is patent-encumbered
Vorbis (audio)
- can be embedded in .ogg (also .mp4, .webm, .mkv) containers
- royalty-free
- number of channels: any
</ref>
prepare your files
To be certain that your videos will play in all current browsers, you'll need to have videos in both .mp4 and .ogv container formats. In other words you need to encode your videos into these 2 formats.
There are several solutions to do this, but Miro video converter seems to the best, converting both to .mp3 and .ogg.
Download Miro from http://www.mirovideoconverter.com/
in Miro
- Select the file you want to convert to .ogv and .mp4
- Choose the Format menu:
- For a .mp4 video Video >
MP4 - For a .ogv video Video >
Ogg Theora
- For a .mp4 video Video >
- Press the large button: "Convert to ..."
Conversion will start. When it is done the new file will be saved.
video tag
<video controls>
<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">
<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv" type="video/ogg">
</video>
This is the simplest a web video player you can get.
A <video> tag encapsulating 2 <source> tags, each containing the same video in the different formats mp4 and ogv.
The argument controls make sure the video players has controls.
audio tag
If you want to create an audio player, it is similar to video:
<audio controls>
<source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.mp3" type="audio/mp3">
<source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.ogg" type="audio/ogg">
</audio>
video / audio tag attributes
Besides controls the <video> has a number of other attributes.[4]
- controls - if present, show player's controls
- autoplay - if present, automatically start player as page loads.
- loop - if present,
- poster - presents a poster image while the video is stopped as
- height
- width
<video controls loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">
<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">
<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv" type="video/ogg">
</video>
notes
- ↑ Read more on browsers' supported formats in https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
- ↑ http://diveintohtml5.info/video.html
- ↑ All info on av codecs and containers in http://wiki.multimedia.cx/
- ↑ Read more on video attributes in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
