HTML and CSS Reference
In-Depth Information
This can be accomplished with JavaScript, or declaratively with
a
mediagroup
attribute on the
<audio>
or
<video>
element:
<div>
<video src=”movie.webm” autoplay controls
¬ mediagroup=movie></video>
<video src=”signing.webm” autoplay
¬ mediagroup=movie></video>
</div>
This is very exciting, and very new, so we won't look further: the
spec is constantly changing and there are no implementations.
NoTE
On 25 August 2011,
the American Federal
Communications Commission
released FCC 11-126, ordering
certain TV and video networks
to provide video description for
certain television programming.
Providing descriptions of a pro-
gram's key visual elements in
natural pauses in the program's
dialogue is a perfect use of
mediagroup
and the associ-
ated API.
Video conferencing, augmented reality
As we mentioned earlier, accessing a device's camera and micro-
phone was once available only to web pages via plugins. HTML5
gives us a way to access these devices straight from JavaScript,
using an API called
getUserMedia.
(You might find it referred to as
the <device> element on older resources. The element itself has
been spec'd away, but the concept has been moved to a pure API.)
An experimental build of Opera Mobile on Android gives us
a glimpse of what will be possible once this feature is widely
available. It connects the camera to a
<video>
element using
JavaScript by detecting whether
getUserMedia
is supported and,
if so, setting the stream coming from the camera as the
src
of
the
<video>
element:
<!DOCTYPE html>
<h1>Simple web camera display demo</h1>
<video autoplay></video>
<script type=”text/javascript”>
var video = document.getElementsByTagName('video')[0],
heading = document.getElementsByTagName('h1')[0];
NoTE
getUserMedia
is
a method of the navigator
object according to the spec.
Until the spec settles down,
though, Opera (the only imple-
mentors so far) are putting it on
the
opera
object.
if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback,
¬ errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
heading.textContent =
“An error occurred: [CODE “ + error.code + “]”;
}
