Using HTML Audio and Video

Sept. 29, 2015

References

2. HTML 5 4.7.7 The audio element, http://www.w3.org/TR/html5/embedded-content-0.html#the-audio-element

3. HTML/Elements/audio, https://www.w3.org/wiki/HTML/Elements/audio

4. HTML5 Video Media Events and APIs, http://www.w3.org/2010/05/video/mediaevents.html

5. HTML 5 Video, https://en.wikipedia.org/wiki/HTML5_video

6. How to Embed Video Using HTML5, by Justin Whitney, https://msdn.microsoft.com/en-us/hh552485.aspx

7. Safari HTML5 Audio and Video Guide, https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

8. Comparison of video container formats, https://en.wikipedia.org/wiki/Comparison_of_video_container_formats

9. H.264/MPEG-4 AVC, https://en.wikipedia.org/wiki/H.264/MPEG-4_AVC

10. Theora video compression, http://www.theora.org/

11. WebM, http://www.webmproject.org/

12. Using HTML 5 Audio and Video, https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

13. Media Formats supported by the HTML audio and video elements, https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

14. HTML 5 Encoding, https://app.zencoder.com/docs/guides/encoding-settings/html5

15. Easy HTML5 Video (download) – convert any video to HTML5, , http://easyhtml5video.com/

16. 5 Things You Need to Know about HTML 5 Video and Audio, April 13, 2011, https://channel9.msdn.com/Events/MIX/MIX11/HTM12

17. Dive into HTML5

18. Video Support Demo, https://dev.modern.ie/testdrive/demos/all/

19. Wiki Commons: Converting Video, https://commons.wikimedia.org/wiki/Help:Converting_video

20. Ogg - Xiph Technologies, https://wiki.xiph.org/index.php/TheoraSoftwareEncoders

21. HTML5 and Web Video: Questions for the Industry from the Community (why IE9 is support WebM), Feb. 2, 2011, http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx

22. Getting Started with HTML5 Audio Element, https://msdn.microsoft.com/en-us/library/gg589529(v=vs.85).aspx

23. HTML5 Audio Formats Test, http://hpr.dogphilosophy.net/test/

24. HTML5 Audio, https://en.wikipedia.org/wiki/HTML5_Audio

Introduction

The HTML 5 specification provides support for audio and video media playback through <audio> and <video> elements in web browsers without requiring plug-ins or script. Video plg-ins include Adobe Flash, Silverlight, jQuery plugins, etc. New web browsers for PC/desktops and mobile devices including Safari (iPad, iPhone), Chrome for PC and Android-based smartphones and tablets, IE and Frefox declare the support for HTML 5 video.

Video Container Formats (file formats)

Additional complexity complicated the HTML5 video support of audio codecs and video codecs which are used to handle coding-encoding with different levels of compression and quality. A container format is used to store and transmit coded video and audio. Many combinations of codecs and container formats exist, the following three formats including H.264, Ogg Theora, and VP8 (WebM) are the current possible options for encoding your video for HTML5 browsers.

Current Video Formats and Supported Major Browsers for HTML5 [6]-[11]

Browser	H.264	Ogg Theora	VP8 (WebM)
IE	native	with install	with install
Chrome	native	native	native
Safari	native	with install	no
Mozilla	with install from Microsoft	native	native
Opera	no	native	native

Comparison of H.264, Ogg and WebM Video Formats [6]-[11]

Parameters	H.264	Ogg Theora	VP8 (WebM)
Standard	MPEG-4 Part 10, Advanced Video Coding (AVC)	Open source	Open source, Alliance for Open Media
Company Ownership	Apple	Xiph.org	Google
License Fee	Yes	Free
Quality per bit rate	Best	Good	Very Good
File Compression Rate (File size)	Very good	Good	Lower than good

Notes

· iPhone records video in H.264 format, but you cannot drop it into an HTML site; need to run it thorough a converter first.

· MP4 videos plays natively in Safari, Chrome, and IE9

· Ogg Theora Vorbis: The Ogg container format with the Theora video codec and Vorbis audio codec is supported in desktop/mobile devices: Firefox, Chrome, and Opera

Video Converters for Mult-Platform (Windows, Mac and Linux)

· Miro Video Converter (free and open source), http://www.mirovideoconverter.com/ ; for converting almost any video to MP4, WebM (VP8), Ogg Theora, or for Android, iPhone and iPad.

· Hanbrake (free and open source transcoder), https://handbrake.fr/

Reference [13] Media Formats Supported by the HTML audio and video elements, https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Audio Formats and Supported Major Browsers for HTML5 [6]-[11]

Browser	H.264 Codec	Ogg Theora Codec	VP8 Codec (WebM)
IE9+	native	with install	with install
Chrome	native	native	native
Safari	native	with install	no
Mozilla	with install from Microsoft	native	native
Opera	no	native	native

HTML5 supports audio and video streaming through the two elements <audio> and <video> and related attributes as shown in the following table.

Attributes of the <audio> and <video> elements [6]-[11]

Attribute	Value	Description
preload	none \| metadata \| auto	none- to instruct browser not preload media data. metadata – browser should preload only media metadata auto - - browser should preload all media data
autoplay	Boolean – any value sets this to true	If present, asks the browser to play the media as soon as the page is loaded,
controls	Boolean – any value sets this to true	If present, asks the browser to display the default media controls. It allows for manipulation of methods and properties such as play(), pause()
height (video only)	pixels (optional)	For setting the height dimension of the video player.
width (video only)	Pixels (optional)	For setting the width of the video player.
loop	Boolean – any value set this to true	If present, causes the media to loop indefinitely.
poster (video only)	URL of image file	If present, shows the poster image until the first frame of video has downloaded.
src	URL	The URL of the media.

MIME Type for Audio and Video File Formats

MIME types

· video/webm -- a WebM media file containing video and possibly audio as well

· audio/webm -- a WebM media file containing only audio

· audio/ogg -- an ogg file containing only aduio

· video/ogg -- an off media file containing video and possibly audio as well

· MP4 H.264 (AAC or MP3)

· audio/mpeg -- MP3

Audio Playback Examples, http://www.etcs.ipfw.edu/~lin/HTML5/audios/HTML5-audiotesting.html

The following mp4 and oga audio files were found from w3.org and used for testing in this example.

Your user agent does not support the HTML5 Audio element.

</audio>

WebM Demo Files for Testing

· WebM video for Microsoft IE+9 (Google), https://tools.google.com/dlpage/webmmf/

· WebM Files – Demo Files, http://www.webmfiles.org/demo-files/

· Chrome, version 450.2454.101, 2015 – OK

· Windows IE9 with WebM video

Examples of HTML5 Playing WebM Video, http://www.etcs.ipfw.edu/~lin/HTML5/videos/big-buck-bunny-trailler-webM.html

< /video>

<!DOCTYPE html >

<html>

<head>

<title>Big Buck Bunny Trailler - WebM File Testing</title>

</head>

<body>

<h3>

Big Buck and Bunny Trailer - WebM Video Demo

See <a href="http://www.webmfiles.org/demo-files/">All Demos from Webmfiles.org</a>

</h3>

< /video>

</body>

</html>

webm-video-ex2.html

<video width="123" height="123" controls >
< source src="http://www.etcs.ipfw.edu/html5/videos/webmfiles/elephansts-dream.webm" type='video/webm; codecs="vp8, vorbis"'>
< /video>

Webm Video Example:

Your browser does not support the <code> audio </code>

</video>

Your browser does not support the <code> audio </code>

</audio>

Your browser does not support the <code> audio </code>

</audio>

Your user agent does not support the HTML Audio element.

</audio>

HTML 5 <video> Element

The <video> element is designed to work alone without any detection scripts.

HTML video player

HTML 5 supported video formats include

· MPEG-4

· Flash Video

· Ogg

· WebM

· Audio Video Interleave

Using JavaScript to Control HTML5 Video Player, https://msdn.microsoft.com/en-us/liBRary/hh924823(v=vs.85).aspx