Daniel K. Schneider: /* Tutorials */

2018-03-26T17:33:04Z

Tutorials

New page

{{incomplete}}
{{web technology tutorial|Beginners}}

== Introduction ==

This tutorial shows basic use of video and audio in [[HTML5]]. HTML5 includes special elements (tags) allowing to include video and audio and to define controls. Unlike in HTML 4.x and XHTML 1.x, video and audio is fully integrated in HTML5, 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 media files are actually '''containers''' (i.e. so-called [[Multimedia container format]]s) that include in turn various types of data files, 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).

See also:
* [[HTML5]] (Overview)
* [[HTML5 video and JavaScript]]
* [[Video editing and conversion]]. If your input type fits, we suggest using [http://firefogg.org/ FireOgg] for simple conversion (a Firefox plugin)
* [[WebVTT]] (a track file format that can be used with HTML5 Video Players)

=== Browser support ===

Browser support can change and there may be '''mistakes''' in the information below (updated March 2018). We did not test Safari and Android ourselves. In addition, a same browser may behave differently on different operating systems. Test it yourself, e.g. by using our simple [http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html example file] ...). Or better, explore the links at the end of this article for more exhaustive and up-to-date information.

The most popular HTML5 video formats are Webm/VP8/VP9), mp4/H.264 and ''OGG/Theora'' (ogv). Originally, the HTML5 specification wanted to include OGG as standard, but after vendor opposition, it was decided HTML5 should be open to accept all formats. As of 2018, most recent browers support most popular formats, i.e. WebM and MP4. Safari does not seem to play OGV (Ogg/Theora), the only free open source format.

The following table made in 2012 and updated March 2018 provides a summary overview. There may be mistakes and it does not include compatibility with all Codecs. It does not include browser extensions or that will add extra functionality, e.g. Flash. See [http://leanbackplayer.com/other/compatibility_video.html LeanBackPlayer]'s or [http://en.wikipedia.org/wiki/HTML5_video Wikipedia's HTML5 video] for more detailed information.
{| class="wikitable" style="text-align: center;"
|+ Browser implementations of various Video formats
! Browser
! colspan="3" | Formats natively supported by different web browsers (March 2018)
|-
|
! style="width: 20%;" | ogv (Theora/Vorbis)
! style="width: 20%;" | mp4 (H.264/AVC)
! style="width: 20%;" | webm (VP8/Vorbis)
|-
! IE (11) || No || Yes || No
|-
!Edge (17)
!Yes
!Yes
!Yes
|-
! Firefox (58) || Yes || yes || Yes
|-
! Chrome (49) || Yes || Yes || Yes
|-
!Chrome Android (64)
!Yes
!Yes
!Yes
|-
! Safari 11 || No || Yes || No
|-
!iOS Safari 10.2
!No
!Yes
!No
|-
! Opera || Yes || Yes || Yes
|-
!Opera Mini
!No
!No
!No
|-
! Samsung Android || No || Yes || Yes
|}

The example video we are using is this page was taken from [https://vimeo.com/18879649 Vimeo]. It includes a 2011 talk about the state of Wikipedia by Jimmy Wales, its founder. We produced [http://tecfa.unige.ch/guides/html/html5-video/videos several versions] without paying a lot of attention to encoding details.

Browser support for '''audio''', as for Video, is not uniform
{| style="text-align: center; class=" wikitable"
|+ Browser implementations of various audio formats
|-
!
! style="width: 15%;" | Ogg Vorbis (.ogg)
! style="width: 15%;" | WAV PCM (.wav)
! style="width: 15%;" | MP3 (.mp3)
! style="width: 15%;" | AAC (.m4a)
|-
! IE || no|| no || yes || yes
|-
! Firefox || yes || yes
|yes
|-
! Chrome || yes || yes || yes || yes
|-
! Safari || no || yes || yes || yes
|-
! Opera mini || yes || yes || no || no
|-
! Android (Chrome, UC, Samsung) || yes || yes || yes || yes
|}

Note about "fallback": When you create a webpage and you wish to integrate video and sound using HTML5, you have to take into account the fact that some people still may be using browsers that don't support HTML5. Since your goal is to be sure your content is available to the widest possible audience, you may provide an alternative.
This is called a "fallback": you either display a message stating that their browser doesn't support HTML5 (displaying ONLY a message is not a very good idea, since they won't be able to watch your video) or switch to a player that makes use of a more common (and older) technology such as an Adobe Flash player.

== Basic use of video ==

While the video tag and its attributes are standardized, the video formats (i.e. containers and codecs) are not, as explained above. For this reason, it is good practice to include several variants of the same file. As of 2018 most browsers do support popular video formats. However, since new formats are introduced every few years, a designer still must know about presenting alternatives. E.g. HEVC/H.265 only works in Microsoft and Apple Browsers as of March 2018. The former also require hardware support.

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

A note on self-closing tags and boolean attributes: The following code is perfectly legal HTML5:
<source lang="XML">
<video id="movie1" controls>
<source src="videos/state-of-wikipedia-480x272.mp4" >
Your browser doesn't support HTML5. Maybe you should upgrade.
</video>
</source>
However, since there may be a future XHTML5 profile and since editors deal better with closed tags we suggest to make your code [[XML]] compliant:
<source lang="XML">
<video id="movie1" controls="controls">
<source src="videos/state-of-wikipedia-480x272.mp4" />
Your browser doesn't support HTML5. Maybe you should upgrade.
</video>
</source>

=== Very simple use - not recommended ===

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.

<source lang="XML">
<video src="videos/state-of-wikipedia-480x272.ogv" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>*.ogv - 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>*.mp4 - This example wouldn't work in a browser like Firefox
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>*.webm - This example wouldn't work in a browser like IE9
that doesn't support webm</p>
</source>

=== Simple use of alternatives ===

The following code shows how to define three alternatives with a fallback message for non HTML5 browsers.
<source lang="XML">
<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>
</source>

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.
<source lang="XML">
<video id="movie2" controls="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>
</source>

== The HTML5 video element ==

=== Content model ===

* The '''video element''' can not be used inside the '''a''' and the '''button''' elements
* The video element must have both a start and an end tag. I.e. it can't be self-closed.
* The video element '''either''' must include a single '''src''' attribute or one or more '''source''' elements followed by '''track''' elements, followed by any sort of [http://dev.w3.org/html5/markup/common-models.html#common.elem.phrasingphrasing or flow contents], i.e. all sorts of stuff, but that only will be shown as fallback).

Typical structure of a video element:
<source lang="XML">
<video id="movie1" controls>
<source src="vid.mp4" />
<source src="..." />
<track enabled="true" kind="subtitles" label="EN VTT" src="captions.vtt" srclang="en" type="text/vtt"/>
Any sort of extra stuff below for fallback. E.g. a message like
"Your browser doesn't support HTML5. Maybe you should upgrade."
</video>
</source>

=== Parameters 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.
<source lang="xml">
controls
controls="controls"
controls=""
</source>

The '''video''' element may have the following attributes:

: src — Address of the resource
: crossorigin — How the element handles crossorigin requests
: poster — Poster frame to show prior to video playback
: preload — Hints how much buffering the media resource will likely need
: autoplay — can be started automatically when the page is loaded
: playsinline — Encourage to display video content within the element's playback area
: loop — Whether to loop the media resource
: muted — Whether to mute the media resource by default
: controls — Show user agent controls
: width — Horizontal dimension
: height — Vertical dimension

Below we describe the most important ones.

;src = "source file"
: Allows to define a single video file. See the source element below for a better alternative.
: Example:
<source lang="xml">
src="myfile.webm"
</source>

;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:
<source lang="xml">
src="vaction_picture.jpg"
</source>

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

;width and height = "size"
: Allow to define size of the video element in CSS pixels (mostly 96ppi)
: By default, width and height will adapt to the original size.
: Example
<source lang="xml">
width="500"
height="400"
</source>

;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
<source lang="xml">
autoplay
</source>

;muted = on|off
: If present, will mute the audio
: Example
<source lang="xml">
muted
</source>

;preload = none | metadata | auto
: This attribute tells whether and what to preload before the user clicks the play button. This will help the users save bandwidth which is particularly useful on mobile devices and slow home networks. Until recently (2018) some vendors did neither implement nor respect this hint.

: Example: The author hints that nothing should be downloaded.
<source lang="xml">
preload="none"
</source>
: Example: Enough data should be downloaded to show a frame and to determine duration.
<source lang="xml">
preload="metadata"
</source>
: Example: browser should download as much as it sees fit to give a good user experience, possibly downloading the whole video.
<source lang="xml">
preload=""
preload="auto"
</source>

;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.
<source lang="xml">
autobuffer
</source>

;loop = on | off
: If present, will loop
<source lang="xml">
loop
</source>

;style = "CSS style"
: CSS style properties

=== Web server configuration ===

Your web server must define all the mime types, else web browsers may not display video/audio.

In particular, either add the following mime types in the mime.types file
video/ogg ogg ogm ogv
video/mp4 mp4
video/webm webm
audio/mpeg mpga mp2 mp2a mp3 m2a m3a
audio/ogg oga ogg spx
audio/mp4 mp4a

On an Apache server, you also could edit an http.conf file like this:
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType audio/mpeg mpga mp2 mp2a mp3 m2a m3a
AddType audio/ogg oga ogg spx
AddType audio/mp4 mp4a
AddType audio/playlist m3u M3U

If you don't have administrator rights, you could add them on a per directory basis, e.g. put the above list of ''AddType''s in the .htaccess file on Apache.

== The audio element ==

The audio element is very similar to the video element. It includes the same content model (must not be within an a or a button) and can include '''source''' elements, followed by '''track''' elements followed by flow elements or phrasing content.

Permitted attributes are mostly the same:
* global attributes & autoplay & preload & controls & loop & mediagroup & muted & src
* '''Audio''' doesn't support the ''poster'' attribute (wouldn't make sense).

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

=== Simple use with control ===
Ogg
<source lang="XML">
<audio src="audio/guitar.ogg" controls>
Sorry, your browser doesn't support HTML5 audio
</audio>
</source>

MP3
<source lang="XML">
<audio src="audio/guitar.mp3" controls>
Sorry, your browser doesn't support HTML5 audio
</audio>
</source>

=== Alternatives ===

<source lang="XML">
<audio id="audio1" controls>
<source src="audio/guitar.mp3">
<source src="audio/guitar.ogg">
<source src="audio/guitar.m4a">
<source src="audio/guitar.wav">
Your browser doesn't support HTML5. Maybe you should upgrade.
</audio>
</source>

=== Simple background music ===
<source lang="XML">
<audio id="my_song" autoplay loop>
<source src="audio/guitar.mp3">
<source src="audio/guitar.ogg">
<source src="audio/guitar.m4a">
<source src="audio/guitar.wav">
Your browser doesn't support HTML5. Maybe you should upgrade.
</audio>
</source>
There is no attribute for the volume, but there is JavaScript ...

Example:
* http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-background.html

== The source element ==

The '''source''' element must be either a child of the '''video''' or the '''audio''' element. Below we recall a simple example:
<source lang="HTML5">
<video id="movie1" controls>
<source src="vid.mp4" />
</video>
</source>

It can include the so-called global attributes (like "style" or "id"). It's proper attributes are:

; src ="URL" (mandatory)
: Identifies the video file

; type="MIME type"
: Allows to identifies the mime type of the media source plus precise codecs.
: Examples
<source lang="XML">
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'
type="video/mp4;codecs='avc1.42E01E, mp4a.40.2'"
</source>

; media
: Can define a media type to help the client selecting the right video source.

== The track element ==

The track element allows to add captions (subtitles) and other information, i.e. allow to add textual information that can be displayed to the user. However, ''track'' currently (April 2012) is not implemented in most browsers. In addition, the supported track file formats still seem to be a very moving target. Contenders are WebVTT, SRT and [[Timed Text]] (TTML). In addition, some containers also may include their own "track" data.

Example code found at [https://developer.mozilla.org/en/HTML/Element/track Mozilla]. Tracks may not yet work in your browser.
<source lang="XML">
<video src="sample.ogv">
<track kind="captions" src="sampleCaptions.srt" srclang="en">
<track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
<track kind="chapters" src="sampleChapters.srt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
<track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja">
<track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz">
<track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1">
<track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2">
<track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3">
</video>
</source>

Good HTML5 players, however implement some of these track formats.

'''Simple live example using the [http://leanbackplayer.com/ LeanBack Player]'''
<source lang="XML">
<div class="leanback-player-video">
<video controls="controls" preload="metadata" poster="wikipedialogo.png" width="480" height="272">
<source src="videos/state-of-wikipedia-480x272.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/state-of-wikipedia-480x272.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="videos/state-of-wikipedia-480x272.ogv" type='video/ogg; codecs="theora, vorbis"' />

<track enabled="true" kind="subtitles" label="EN"
src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
<track enabled="true" kind="subtitles" label="EN VTT"
src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
<track enabled="true" kind="subtitles" label="FR"
src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
<object class="leanback-player-flash-fallback" width="640" height="360"
type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#000000" />
<param name="flashVars"
value="config={'playlist':['wikipedialogo.png',
{'url':'videos/state-of-wikipedia-480x272.mp4','autoPlay':false,'autobuffering':false}]}" />
</object>
<div class="leanback-player-html-fallback" style="width: 640px; height: 360px;">
<img src="wikipedialogo.png" width="640" height="360" alt="Poster Image"
title="No HTML5-Video playback capabilities found. Please download the video(s) below." />
<div>
<strong>Download Video:</strong>
<a href="videos/state-of-wikipedia-480x272.mp4">.mp4</a>
<a href="videos/state-of-wikipedia-480x272.webm">.webm</a>
<a href="videos/state-of-wikipedia-480x272.ogv">.ogv</a>
</div>
</div>
</div>
</source>

Live example file:
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
Track files:
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.srt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt

=== Track attributes ===

; kind
: Kind of text track. The following keywords are allowed according to [https://developer.mozilla.org/en/HTML/Element/track Mozilla]:
:: subtitles: A transcription or translation of the dialogue.
:: captions: A transcription or translation of the dialogue or other sound effects. Suitable for users who are deaf or when the sound is muted.
:: descriptions: Textual descriptions of the video content. Suitable for users who are blind or not able to view the video for another reason.
:: chapters: Chapter titles, intended to be used when the user is navigating the media resource.
:: metadata: Tracks used by script. Not visible to the user.

; src (mandatory)
: Defines the URL for the track file

; srclang
: Defines the language of the track text, so that the user and/or the client can make a choice

; label
: A user-readable title of the text track Used by the browser when listing available text tracks.

; default
: Identifies a track as default track. It only can be used with one track (of course).

== Style and controlling media playback ==

In addition to using the width and height attribute for the video tag, you can use any reasonable and not reasonable CSS properties.

<source lang="XML">
<video id="movie1" controls preload="metadata"
style="float:right;
margin: 0px 10px 0px 10px;
border-style: solid;
border-width: 50px 50px 50px 50px;
border-image: url(bricks.jpg) 50 round;
-webkit-border-image: url(bricks.jpg) 50 round;
-moz-border-image: url(bricks.jpg) 50 round;
">
<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>
</source>
* Life example file: http://tecfa.unige.ch/guides/html/html5-video/html5-video-with_style.html

Users can control playback through the default player. However, in case you don't want to use the control attribute, you can implement your own through JavaScript. An other alternative is to work with a Player library (see below).

Below is an audio control example found in the [https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox Using audio in video in Firefox tutorial]

<source lang="XML">
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>
</source>

* Life example file: http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-background.html

== HTML5 player libraries ==

Since default controls in navigators do not offer a lot of functionality and since there still many non-HTML5 navigators installed, so-called HTML5 video players can offer both advanced controls and fallback. In addition they may implement features that are still missing in various browser implementations. These HTML5 video players are implemented with ready-to-go JavaScript libraries. Of course, you could write your own.

In addition, web designers may not like the visual aspect of default player and may want to adapt it to the page design.

These players are implemented with JavaScript, offer different functionality 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:36, 22 April 2012 (CEST) from vidojs.com). Other player products could be described in the same way.

Some of HTML5 players (in particular order) are:
* [http://leanbackplayer.com/ LeanBackPlayer]
* [http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library Kaltura]
* [http://videojs.com/ Video.js]
* [http://mediaelementjs.com/ Mediaelement.js]
* [https://github.com/aFarkas/jMediaelement jMediaelement]

HTML5 Video.org offers a [http://html5video.org/wiki/HTML5_Player_Comparison HTML5 Player Comparison], i.e. provides an overview table plus a detailed description of each HTML5 Player library. '''Recommended reading''', although it may be biased since it is sponsored by Kaltura.

Otherwise, you can search for something like "best html5 player", but pay attention to the publication date !

== Video capturing ==

[https://www.w3.org/TR/html-media-capture/ HTML Media Capture], allows to capture data from device capturing mechanism such as a microphone or the Camera. It has become a recommendation in Feb 2018. As of March 2018 it only seems to work in mobile browsers such as iOS Safari, Chrome for Android or Samsung Internet. There exist other technologies to do that and that rely on JavaScript.

Below we include the examples from the [https://www.w3.org/TR/html-media-capture/ 2018 recommendation], which also shows some JavaScript examples that we do not reproduce here.

Taking a picture
<source lang="HTML5">
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" capture="user">
<input type="submit" value="Upload">
</form>
</source>

Taking a video with the rear camera
<source lang="HTML5">
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="video" accept="video/*" capture="environment">
<input type="submit" value="Upload">
</form>
</source>

Capture an audio
<source lang="HTML5">
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="audio" accept="audio/*" capture>
<input type="submit" value="Upload">
</form>
</source>

== Links ==

=== Specifications ===

* [http://dev.w3.org/html5/markup/Overview.html 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)
** [http://dev.w3.org/html5/markup/video.html#video video – video]
** [http://dev.w3.org/html5/markup/audio.html#audio audio – audio stream]

* [http://dev.w3.org/2011/webrtc/editor/webrtc.html 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.

* [http://dev.w3.org/2011/webrtc/editor/getusermedia.html 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 ===

* [http://www.w3.org/community/webed/wiki/HTML/Elements/video HTML/Elements/video] (W3C wiki)
* [https://developer.mozilla.org/en/html/element/video element/video] (Mozilla)
* [https://developer.mozilla.org/en/html/element/audio element/audio] (Mozilla)
* [https://developer.mozilla.org/en/HTML/Element/source element/source] (Mozilla)
* [https://developer.mozilla.org/en/HTML/Element/track element/track] (Mozilla)
* [http://msdn.microsoft.com/en-us/library/ie/hh673566%28v=vs.85%29.aspx Video: timed text tracks] (Microsoft/IE10)
* [http://en.wikipedia.org/wiki/Open_video HTML5 video] (Wikipedia)
* [http://en.wikipedia.org/wiki/HTML5_audio HTML5 audio] (Wikipedia)

=== Tutorials ===

* [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content Video and audio content] MDN Tutorial (2018), recommended.
* [http://www.w3.org/2010/Talks/1014-html5-video-fd/video-html5.pdf Towards Video on the Web with HTML5] by Daoust, Francois; Hoschka, Philipp; Patrikakis, Charalampos Z (2010)
* [https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox Using HTML5 audio and video], Mozilla (also useful for other browsers)
* [http://dev.opera.com/articles/view/introduction-html5-video/ Introduction to HTML5 video] by Lawson, Bruce; Lauke, Patrick H., Opera. (2010-02-11)
* [http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2 Everything you need to know about HTML5 video and audio] by Pieters, Simon at Opera (2010-03-03)
* [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://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.
* [http://www.pubpixel.com/article/17/how-to-add-timed-media-tracks-like-subtitles-captions-descriptions-chapters-and-metadata-to-your-audio-or-video-files-using-html5 How To Add Timed Media Tracks Like Subtitles, Captions, Descriptions, Chapters And Metadata To Your Audio Or Video Files Using HTML5] 2011, at Pubpixel

=== Web sites ===

* [http://html5video.org/ HTML5Video.org]
* [http://www.siteduzero.com/tutoriel-3-561857-la-video-et-l-audio.html/ Website in French]

=== Example code / testing ===

* http://playground.html5rocks.com/#video_element
* [http://www.w3.org/2010/05/video/mediaevents.html MediaEvents Demo] (W3C)
* [http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/ Sample WebM, Ogg, and MP4 Video Files for HTML5]

[[Category: Digital video]]
[[Category: Web authoring]]
[[Category: web standards]]
[[Category: SVG]]
[[fr:HTML5 audio et video]]

← Older revision		Revision as of 02:20, 10 April 2021
Line 622:		Line 622:
	[[Category: SVG]]		[[Category: SVG]]
	[[fr:HTML5 audio et video]]		[[fr:HTML5 audio et video]]
			{{edutechwiki}}

HTML5 audio and video - Revision history

Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

Daniel K. Schneider: 1 revision imported

Daniel K. Schneider: /* Tutorials */

← Older revision	Revision as of 00:47, 10 April 2021
(No difference)