Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/06"
From Publication Station
| Line 5: | Line 5: | ||
Let's see how. | Let's see how. | ||
== preparing your video files== | == preparing your video files== | ||
{| class="wikitable" border="1" | {| class="wikitable" border="1" | ||
|- | |- | ||
| Line 26: | Line 22: | ||
|} | |} | ||
<span style="background:yellow">'''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.'''</span> | |||
== 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.''' <ref name="divehtml"> | |||
http://diveintohtml5.info/video.html</ref> | |||
'''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. <ref name="key frames">Note: a lossy audio and video compression codecs try to store the max amount of information in the smallest amount of space. One technique use to achieve this goal in video is the use of key frames instead of sequence of frames. In a second there only two or three key frames are used to create the illusion of movement, the remaining frames are filled with inbetweens, changes og pixel color. When a drastic change to the image occurs a key frame must be created.</ref> | |||
==video codes== | |||
==video | |||
=== H264 === | === H264 === | ||
* can be embedded in mp4 container | * can be embedded in mp4 container | ||
| Line 49: | Line 41: | ||
===Theora=== | ===Theora=== | ||
* can be embedded in any codec, but is most common in .ogv container | |||
* royalty-free | * royalty-free | ||
==audio codecs== | ==audio codecs== | ||
===MP3=== | ===MP3=== | ||
* number of channels: 1 or 2 <ref name="audiochan">Unlike video, audio typically is in ''stereo'', which means that it has ''2 channels'' or streams</ref> | |||
* number of channels: 1 or 2 | |||
* possible bitrates: 64 kbps, 128 kbps, 192 kbps | * possible bitrates: 64 kbps, 128 kbps, 192 kbps | ||
* is patent-encumbered | * is patent-encumbered | ||
* Also known as MPEG-1 Audio Layer 3. | |||
===AAC=== | ===AAC=== | ||
* is patent-encumbered | * is patent-encumbered | ||
* number of channels: up to 48 | * number of channels: up to 48 | ||
* Also known as Advanced Audio Coding | |||
===Vorbis=== | ===Vorbis=== | ||
can be embedded in .ogg (also .mp4, .webm, .mkv) containers | * can be embedded in .ogg (also .mp4, .webm, .mkv) containers | ||
* royalty-free | * royalty-free | ||
* number of channels: any | * number of channels: any | ||
==prepare your files== | |||
As said previously: | |||
<span style="background:yellow">'''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.'''</span> In other words you need to encode your videos into these 2 formats. | |||
There are several solutions to do this: | |||
* [https://handbrake.fr/ Handbrake] + [http://firefogg.org/ firefoog]converter to ogg (for firefox) | |||
* http://www.ffmpegx.com/ for Mac OSX | |||
* http://mconverter.sourceforge.net/ for Mac OSX | |||
* <s>http://sourceforge.net/projects/hypervideoconve/</s> | |||
* <s>http://firefogg.org/</s> | |||
Revision as of 10:17, 25 December 2015
audio and video in HTML5
HMTL5 includes a standard way to embed audio and video tags, without the use of flash. It playing audio and video quite easy and opens up a lot of possibilities audio-visual interaction and manipulation.
Let's see how.
preparing your video files
| 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 |
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.
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. [1]
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. [2]
video codes
H264
- can be embedded in mp4 container
- is patent-encumbered
Theora
- can be embedded in any codec, but is most common in .ogv container
- royalty-free
audio codecs
MP3
- number of channels: 1 or 2 [3]
- possible bitrates: 64 kbps, 128 kbps, 192 kbps
- is patent-encumbered
- Also known as MPEG-1 Audio Layer 3.
AAC
- is patent-encumbered
- number of channels: up to 48
- Also known as Advanced Audio Coding
Vorbis
- can be embedded in .ogg (also .mp4, .webm, .mkv) containers
- royalty-free
- number of channels: any
prepare your files
As said previously: 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:
- http://www.ffmpegx.com/ for Mac OSX
- http://mconverter.sourceforge.net/ for Mac OSX
tags
event listeners
references
AV Codes supported by video containers
notes
- ↑ http://diveintohtml5.info/video.html
- ↑ Note: a lossy audio and video compression codecs try to store the max amount of information in the smallest amount of space. One technique use to achieve this goal in video is the use of key frames instead of sequence of frames. In a second there only two or three key frames are used to create the illusion of movement, the remaining frames are filled with inbetweens, changes og pixel color. When a drastic change to the image occurs a key frame must be created.
- ↑ Unlike video, audio typically is in stereo, which means that it has 2 channels or streams
- ↑ All info on av codecs and containers in http://wiki.multimedia.cx/
