HTML5 audio and video: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 95: Line 95:
=== Parameters and contents of the video element ===
=== Parameters and contents of the video element ===


HTML5 attributes work like HTML4 attributes, i.e. so-called boolean attributes dont' need to include a value. In addition, it seems that attribute values don't need to be quoted in HTML5. The following two lines are strictly equivalent.
HTML5 attributes work like HTML4 attributes, i.e. so-called boolean attributes dont' need to include a value. In addition, it seems that attribute values don't need to be quoted in HTML5. The following three lines are strictly equivalent.
<source lang="xml">
<source lang="xml">
  controls
  controls
  controls="controls"
  controls="controls"
controls=""
</source>  
</source>  


;src
;src = "source file"
: Allows to define a single video file. See the source element below for a better alternative.
: Allows to define a single video file. See the source element below for a better alternative.
: Example:
: Example:
Line 108: Line 109:
</source>
</source>


;poster
;poster = "picture file"
: Will display a picture while the video downloads and before the user decides to play the video. If absent, the first frame of the video will be shown.
: Will display a picture while the video downloads and before the user decides to play the video. If absent, the first frame of the video will be shown.
: Example:
: Example:
Line 115: Line 116:
</source>
</source>


;controls
;controls = on|off
: Defines if use controls should be displayed. By default there will be none.
: Defines if use controls should be displayed. By default there will be none.
: Examples:
: Examples:
Line 125: Line 126:
</source>
</source>


;width and height
;width and height = "size"
: Allow to define size of the video element
: Allow to define size of the video element
: By default, width and height will adapt to the original size.
: By default, width and height will adapt to the original size.
Line 134: Line 135:
</source>
</source>


;autoplay
;autoplay = on|off
: If present, the video will start playing automatically. This can be annoying since the user may not want to look at it.
: If present, the video will start playing automatically. This can be annoying since the user may not want to look at it.
: Example
: Example
Line 141: Line 142:
</source>
</source>


;preload  
;muted = on|off
: If present, will mute the audio
: Example
<source lang="xml">
muted
</source>
 
;preload = none | metadata | auto
: Since most browsers will automatically start downloading the whole video, one could use this attribute to help the users save bandwith (in particular on mobile devices and slow home networks).
: Since most browsers will automatically start downloading the whole video, one could use this attribute to help the users save bandwith (in particular on mobile devices and slow home networks).


Line 158: Line 166:
</source>
</source>


;autobuffer (deprecated element !)
;autobuffer (deprecated element, don't use this !)
: If present, will start downloading the whole video after the page is loaded. Also use with care, because this will take up bandwidth.
: If present, will start downloading the whole video after the page is loaded. Also use with care, because this will take up bandwidth.
<source lang="xml">
<source lang="xml">
Line 164: Line 172:
</source>
</source>


;autobuffer
;loop = on | off
: If present, will loop
: If present, will loop
<source lang="xml">
<source lang="xml">
  loop
  loop
</source>
</source>
;style = "CSS style"
: CSS style properties
;mediagroup = "string with resources"
: Will tell the the client to link multiple video and audio streams
: Example (needed)


=== Parameters of the source element ===
=== Parameters of the source element ===

Revision as of 16:33, 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")

Draft

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 HTML5 formats are webm/VP8, mp4/H.264 and OGG/Theora (ogv). Originally, the HTML5 specification wanted include OGG as standard, but after vendor opposition, it was decided to support all formats.

The following table provides an overview of implementations as of April 2012. It does not include browser extensions that will add extra functionality. See Wikipedia's HTML5 for more detailed information.

Browser implementations of various Video formats
Browser Formats natively supported by different web browsers (April 2012)
Ogg (Theora/Vorbis) mp4 (H.264/AVC Webm (VP8/Vorbis)
IE (9) No Yes No
Firefox (11) Yes no Yes
Chrome Yes maybe Yes
Safari No Yes No
Opera Yes No Yes
Android Yes Yes Yes

The example video we are using is this page was taken from Vimeo. It includes a 2011 talk about the state of Wikipedia by Jimmy Wales, its founder. We produced several versions without paying a lot of attention to encoding details.

Basic use of video

While the video tag and its attributes are standardized, the video formats (i.e. containers and codecs) are not. For this reason, it is good practice to include several variants of the same file. Since the HTML5 video element doesn't work with older browsers and since default skin and controls differ among browser makers, you also may consider using an HTML5 video player library.

Example file: http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html (also look at its source code).

Too simple use

The following example code shows how to include a single video format. We will show three variants, one for each of popular the HTML5-supported formats. Including a single variant is not recommended. See below for defining alternatives. 

<video src="videos/state-of-wikipedia-480x272.ogv" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like IE9 that doesn't support Ogg</p>

<video src="videos/state-of-wikipedia-480x272.mp4" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like Firfox that doesn't support mp4</p>

<video src="videos/state-of-wikipedia-480x272.webm" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like IE9 that doesn't support webm</p>

Simple use of alternatives

The following code shows how to define three alternatives with a fallback message for non HTML5 browsers. 

<video id="movie1" controls>
  <source src="videos/state-of-wikipedia-480x272.mp4">
  <source src="videos/state-of-wikipedia-480x272.ogv">
  <source src="videos/state-of-wikipedia-480x272.webm">
  Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

The following code shows how to define alternatives that specify codecs. This method is useful if you plan to include "high quality" videos that some clients may not support. 

<video id="movie2" controls>
  <source src="videos/state-of-wikipedia-480x272.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="videos/state-of-wikipedia-480x272.ogv"
          type='video/ogg; codecs="theora, vorbis"' />
  <source src="videos/state-of-wikipedia-480x272.webm"
          type='video/webm; codecs="vp8, vorbis"' />
	<p>The video is available as <a href="videos/state-of-wikipedia-480x272.mp4">H.264 in an MP4 container</a>, 
	or as <a href="videos/state-of-wikipedia-480x272.ogv">VP8 in a Ogg container</a>
	or as <a href="videos/state-of-wikipedia-480x272.webm">VP8 in a
	WebM container</a>. </p>
      </video>

The HTML5 video element

Parameters and contents of the video element

HTML5 attributes work like HTML4 attributes, i.e. so-called boolean attributes dont' need to include a value. In addition, it seems that attribute values don't need to be quoted in HTML5. The following three lines are strictly equivalent. 

 controls
 controls="controls"
 controls=""
src = "source file"
Allows to define a single video file. See the source element below for a better alternative.
Example:
 src="myfile.webm"
poster = "picture file"
Will display a picture while the video downloads and before the user decides to play the video. If absent, the first frame of the video will be shown.
Example:
 src="vaction_picture.jpg"
controls = on|off
Defines if use controls should be displayed. By default there will be none.
Examples:
controls

controls = "controls"
width and height = "size"
Allow to define size of the video element
By default, width and height will adapt to the original size.
Example
 width="500"
 height="400"
autoplay = on|off
If present, the video will start playing automatically. This can be annoying since the user may not want to look at it.
Example
 autoplay
muted = on|off
If present, will mute the audio
Example
 muted
preload = none | metadata | auto
Since most browsers will automatically start downloading the whole video, one could use this attribute to help the users save bandwith (in particular on mobile devices and slow home networks).
Example: The author hints that nothing should be downloaded.
 preload="none"
Example: Enough data should be downloaded to show a frame and to determine duration.
 preload="metadata"
Example: browser should download as much as it sees fit to give a good user experience, possibly downloading the whole video.
 preload=""
 preload="auto"
autobuffer (deprecated element, don't use this !)
If present, will start downloading the whole video after the page is loaded. Also use with care, because this will take up bandwidth.
 autobuffer
loop = on | off
If present, will loop
 loop
style = "CSS style"
CSS style properties
mediagroup = "string with resources"
Will tell the the client to link multiple video and audio streams
Example (needed)

Parameters of the source element

HTML5 player libraries

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:36, 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. Recommended reading.

Basic use of audio

Video capturing

Links

Specifications

  • 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.

Manuals and reference

Tutorials

Web sites

Example code

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=HTML5_audio_and_video&oldid=38799"