Technical Analysis of Video Element tag of HTML5 and different codecs supported

Lohith B OmHU ID: 50897672

• HTML5 Video tag : Single unified standard for video playback and a simple way to embed video in a web page. <video> tag is the replacement of <object> for playing video files in web browser.

<object width="425" height="344"><param name="movie“ value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param><param name="allowFullScreen“ value="true"></param><param name="allowscriptaccess“ value="always"></param><embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"type="application/x-shockwave-flash" allowscriptaccess="always“ allowfullscreen="true" width="425"height="344"></embed>

</object>

<video height="270" src="/static/bunny.mp4" width="480"> </video>

Multiple Sources<video height="270" width="480" controls>

<source src="/static/bunny.mp4" type="video/mp4"><source src="/static/bunny.webm" type="video/webm">

</video>o JW Player : The JW Player helps to fix all browser dependency issues.

• Video Containers: This are not video files, just like a ZIP file. Container formats only define how to store things within them. E.g. MPEG4 .mp4/.m4v, Ogg .ogv, WebM .webm.

• Video codec is a device/software/ algorithm which performs encoding and decoding of the video stream by displaying series of images on the screen.

o Theora : Theora video can be embedded in any container format, most often seen in an Ogg container. Generates high quality videos with comparatively larger file sizes.

o H.264 : A codec for low-bandwidth, low-CPU devices (cell phones); high-bandwidth, high-CPU devices (modern desktop computers); and everything in between. Patent encumbered .

o webM : An audio-video format designed to provide royalty-free, open video compression for use with HTML5 video. H.264 is slightly better.

• Metrics used for analysis and comparison

o Peak Signal-to-Noise Ratio (PSNR) : An engineering term used for the ratio between the maximum possible power of a signal and the power of corrupting noise that affects the fidelity of its representation.

o Mean squared error (MSE): Difference between values implied by an estimator and the true values of the quantity being estimated.

o Structural similarity (SSIM) index is a method for measuring the similarity between two images.

o Bitrate is the number of bits that are processed per unit of time.o Common Intermediate Format (CIF) format used to standardize the horizontal and

vertical resolutions in pixels. of YCbCr sequences in video signals.

• Analysis and Comparison of Video Codecso R-D curves : Variation in codec quality by bitrate or file size. For this metric, a higher

curve presumably indicates better quality. H.264 is a slightly better than WebM. Theora is poor.

X264: Graphs are plotted using WebM: Graphs are plotted using Theora: Graphs are plotted using

o Encoding Speed: Time taken by codecs to encode or compress the video files.Theora is faster takes very less time and doesn’t depend on bitrate.H.264 and WebM are slightly dependent on bit rate.

X264: Graphs are plotted using WebM: Graphs are plotted using Theora: Graphs are plotted using

o Speed/Quality Trade-Off: Simultaneous display of relative quality and encoding.H.264 is way better than webM and Theora.

X264: Graphs are plotted using WebM: Graphs are plotted using Theora: Graphs are plotted using

Codecs Ease QualityCompression Cost

H.264 codec 4 out of 5 4 out of 5 4 out of 5 Patent encumbered

WebM (Vp8) 3 out of 5 4 out of 5 4 out of 5 Free

Theora/Ogg 1 out of 5 3 out of 5 2 out of 5 Free

Codecs/container IE Firefox Safari Chrome Opera iPhone Android

Theora+Vorbis+Ogg

X 3.5+ X 5.0+ 10.5+ X X

H.264+AAC+MP4 9.0+ X 3.0+ 5.0+ X 3.0+ 2.0+

WebM9.0+ (with

components)4.0+ X 6.0+ 10.6+ X 2.3+

Video codec support across different browsers

Overall rating of 3 main codecs on the market