HTML5 audio and video: Difference between revisions
m (→Tutorials) |
mNo edit summary |
||
| Line 4: | Line 4: | ||
== Introduction == | == Introduction == | ||
This tutorial shows basic use of video and audio in [[HTML5]]. HTML5 includes special elements (tags) allow including video and audio that and defining controls. Unlike in HTML 4.x and XHTML 1.x, video and audio is fully integrated, meaning that these elements can also be styled and scripted via the [[DOM]]. | |||
Before learning how to use video and audio in HTML5, you need to understand that these media files are actually '''containers''' (i.e. so-called [[Multimedia container format]]s) that include in turn various types of data, e.g. video and audio streams, chapter-information, captions (subtitles) and meta-information plus synchronization information. Audio and video data are compressed with so-called [[codec]]s (compression and decompression algorithms) | |||
The most popular Internet formats are: | |||
Example file from [https://vimeo.com/18879649 Vimeo]: | Example file from [https://vimeo.com/18879649 Vimeo]: | ||
== Basic use of video == | == Basic use of video == | ||
While the video tag and its attributes are standardized, the video formats (i.e. containes and codecs) are not. For this reason, it is good practice to include several variants of the same file. | |||
== Using players == | |||
Since default controls in navigators do not offer a lot of functionalities and since there still many non-HTML5 navigators installed, so-called HTML video-players can offer both advanced controls and fallback. These players are implemented with JavaScript, offer different functionaly and may or may not be easy to use. More precisely, this principle can be explained by example: {{quotation|An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven't been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies.}} ([http://videojs.com/ What's an HTML5 Video Player], retrieved 13:29, 22 April 2012 (CEST) from vidojs.com). Other player products could be described in the same way. | |||
Some of HTML5 players are: | |||
* [http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library HTML5 Video & Media JavaScript Library] | |||
* [http://videojs.com/ Video.js] | |||
* [http://mediaelementjs.com/ Mediaelement.js] | |||
HTML5 Video.org offers a [http://html5video.org/wiki/HTML5_Player_Comparison HTML5 Player Comparison], i.e. provide and overview table plus a detailed description of each HTML5 Player library. | |||
== Basic use of audio == | == Basic use of audio == | ||
| Line 35: | Line 53: | ||
* [http://camendesign.com/code/video_for_everybody Video for everybody] (shows how to use videos that also will work in older browsers) | * [http://camendesign.com/code/video_for_everybody Video for everybody] (shows how to use videos that also will work in older browsers) | ||
* [http://webdesign.about.com/od/video/ss/html5-video_5.htm How to Use HTML 5 to Display Video in Modern Browsers] by By Jennifer Kyrnin, About.com Guide | * [http://webdesign.about.com/od/video/ss/html5-video_5.htm How to Use HTML 5 to Display Video in Modern Browsers] by By Jennifer Kyrnin, About.com Guide | ||
* [http://html5video.org/wiki/Getting_Started_-_Navigating_HTML5 Getting Started - Navigating HTML5], at HTML5video.org. Actually not much of a getting started article, but rather about history and strategy. | |||
=== Web sites === | |||
* [http://html5video.org/ HTML5Video.org] | |||
=== Example code === | === Example code === | ||
Revision as of 13:29, 22 April 2012
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
Introduction
This tutorial shows basic use of video and audio in HTML5. HTML5 includes special elements (tags) allow including video and audio that and defining controls. Unlike in HTML 4.x and XHTML 1.x, video and audio is fully integrated, meaning that these elements can also be styled and scripted via the DOM.
Before learning how to use video and audio in HTML5, you need to understand that these media files are actually containers (i.e. so-called Multimedia container formats) that include in turn various types of data, e.g. video and audio streams, chapter-information, captions (subtitles) and meta-information plus synchronization information. Audio and video data are compressed with so-called codecs (compression and decompression algorithms)
The most popular Internet formats are:
Example file from Vimeo:
Basic use of video
While the video tag and its attributes are standardized, the video formats (i.e. containes and codecs) are not. For this reason, it is good practice to include several variants of the same file.
Using players
Since default controls in navigators do not offer a lot of functionalities and since there still many non-HTML5 navigators installed, so-called HTML video-players can offer both advanced controls and fallback. These players are implemented with JavaScript, offer different functionaly and may or may not be easy to use. More precisely, this principle can be explained by example: “An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven't been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies.” (What's an HTML5 Video Player, retrieved 13:29, 22 April 2012 (CEST) from vidojs.com). Other player products could be described in the same way.
Some of HTML5 players are:
HTML5 Video.org offers a HTML5 Player Comparison, i.e. provide and overview table plus a detailed description of each HTML5 Player library.
Basic use of audio
Video capturing
Links
Specifications
- HTML5: The Markup Language HTML: The Markup Language An HTML language reference], W3C Working Draft 15 March 2012, by Michael Smith, W3C. (Multi-page version)
- WebRTC 1.0: Real-time Communication Between Browsers, W3C Editor's Draft 16 March 2012. This specification defines a set of APIs to represent streaming media, including audio and video, in JavaScript, to allow media to be sent over the network to another browser or device implementing the appropriate set of real-time protocols, and media received from another browser or device to be processed and displayed locally.
- getusermedia: Getting access to local devices that can generate multimedia streams. W3C Editor's Draft 22 December 2011. This document defines a set of APIs that allow local media, including audio and video, to be requested from a platform.
Manuals and reference
- HTML/Elements/video (W3C wiki)
- HTML5 video (Wikipedia)
Tutorials
- Video for everybody (shows how to use videos that also will work in older browsers)
- How to Use HTML 5 to Display Video in Modern Browsers by By Jennifer Kyrnin, About.com Guide
- Getting Started - Navigating HTML5, at HTML5video.org. Actually not much of a getting started article, but rather about history and strategy.