HTML and CSS Reference
In-Depth Information
Handling Multimedia in HTML5
With the ever-increasing speeds available on mobile devices, and mobile web
browsers supporting more and more video and audio containers and codecs,
there has never been a better time to explore adding video to a mobile web
application.
There are several things you need to think about when adding video to a mobile
web site. It's unfortunately not as simple as encoding video and audio for a
certain file extension or format.
When encoding video and audio for HTML5, there are four things you should
take into consideration.
The supported containers for the device
The supported codecs and decoders on the device
The quality of the final video and audio
The file size of the final video and audio
In order to play back video, you will need to encode the video and audio using a
codec that the target device can understand and play back.
NOTE:
A codec comes in two parts: an encoder and a decoder. When
you compress a video using a specific codec, that same codec is
required to decompress the video ready for playback. The different
codecs are capable of different types and qualities of compression
(e.g., H.264 will encode video differently to VP8). The different codecs
have an effect on file size and quality due to how they compress video.
The quality of the encoded video depends on the bitrate you set; this also has
an immediate impact on the file size. If you have a target file size in mind, you
can calculate what the bitrate for the video should be and work from there. The
following formula should help you work this out.
((video bitrate [kb/sec] + audio bitrate [kb /sec]) * length [seconds]) * 0.125)
= file size [Kb]
There are various bitrate calculators available online that will help you to
calculate what bitrate a video or audio file should be, based on a number of
other factors. This can be useful when using command-line encoding tools such
as FFMPEG or Mencoder.
