Game Development Reference
In-Depth Information
Similar to the new HTML5 audio element, there are more or less two ways we can
use the tag. One way is to simply create the HTML node, specify the same properties
as the
audio
tag, specify one or more
source
nodes, and call it a day. Alternatively,
we can use the JavaScript API available to us and programmatically manipulate the
playback of the video file.
// Step 1: Create the video object
var video = document.createElement("video");
video.width = 400;
video.height = 220;
video.controls = true;
video.poster = "bunny-poster.png";
// Step 2: Add one or more sources
var sources = [
{src: "bunny.ogg", type: "video/ogg"},
{src: "bunny.mp4", type: "video/mp4"},
{src: "bunny.webm", type: "webm"}
];
for (var i in sources) {
var source = document.createElement("source");
source.src = sources[i].src;
source.type = sources[i].type;
video.appendChild(source);
}
// Step 3: Make video player visible
document.body.appendChild(video);
We can also ignore the default controls and manage the playing, pausing, volume
adjusting, and so on, on our own by taking advantage of the attributes available to
the JavaScript object that references the video element. The following is a list of at-
tributes and functions we can call on a video object.
