HTML and CSS Reference
In-Depth Information
var videoType = supportedVideoFormat(videoElement);
if (videoType == "") {
alert("no video support");
return;
}
Finally, we set the
src
property of the
video
element using the file extension we just
received from
supportedVideoFormat()
, and create the event handler for the
canplay
through
event:
videoElement.setAttribute("src", "muirbeach." + videoType);
videoElement.addEventListener("canplaythrough",videoLoaded,false);
}
When the video has finished loading, the
videoLoaded
event handler is called, which in
turn calls the
canvasApp()
function:
function videoLoaded(event) {
canvasApp();
}
Before the code in the last section will work, we need to define the
supportedVideo
Format()
function. The reason for this function is simple: since we are adding
video
objects dynamically to the HTML page, we do not have a way to define multiple
<source>
tags. Instead, we are going to use the
canPlayType()
method of the
video
object
to tell us which type of audio file to load.
The
canPlayType()
method takes a single parameter, a MIME type. It returns a text
string of
maybe
,
probably
, or nothing (an empty string).
“”
(nothing)
This is returned if the browser knows the type cannot be rendered.
maybe
This is returned if the browser does not confidently know that the type can be
displayed.
probably
This is returned if the browser knows the type can be displayed using an
audio
or
video
element.
We are going to use these values to determine which media type to load and play. For
the sake of this exercise, we will assume that both
maybe
and
probably
equate to
yes
. If
we encounter either result with any of our three MIME types (
video/webm
,
video/
mp4
,
video/ogg
), we will return the extension associated with that MIME type so the
sound file can be loaded.
In the function below,
video
represents the instance of
HTMLVideoElement
that we are
going to test. The
returnExtension
variable represents that valid extension for the first