Controlling Video from JavaScript with the video Element
Problem
You want to embed video in your web page, without using Flash. You also want a con‐ sistent look for the video control, regardless of browser and operating system.
Solution
Use the HTML5 video element:
<video id="meadow" poster="purples.jpg" > <source src="meadow.m4v" type="video/mp4"/> <source src="meadow.ogv" type="video/ogg" /> </video>
You can provide controls for it via JavaScript, as shown in Example 9-5. Buttons are used to provide the video control, and text in a div element is used to provide feedback on time during the playback.
Providing a custom control for the HTML5 video element :
<!DOCTYPE html>
<head>
<title>Meadow Video</title>
<script>
<style>
video {
border: 1px solid black;
}
</style>
window.onload=function() {
// events for buttons
document.getElementById("start").addEventListener("click",startPlayback);
document.getElementById("stop").addEventListener("click",stopPlayback);
document.getElementById("pause").addEventListener("click",pausePlayback);
// setup for video playback
var meadow = document.getElementById("meadow");
meadow.addEventListener("timeupdate",reportProgress);
// video fallback
var detect = document.createElement("video");
if (!detect.canPlayType) {
document.getElementById("controls").style.display="none";
}
}
// start video, enable stop and pause
// disable play
function startPlayback() {
var meadow = document.getElementById("meadow");
meadow.play();
document.getElementById("pause").disabled=false;
document.getElementById("stop").disabled=false;
this.disabled=true;
}
// pause video, enable start, disable stop
// disable pause
function pausePlayback() {
document.getElementById("meadow").pause();
this.disabled=true;
document.getElementById("start").disabled=false;
document.getElementById("stop").disabled=true;
}
// stop video, return to zero time
// enable play, disable pause and stop
function stopPlayback() {
var meadow = document.getElementById("meadow");
meadow.pause();
meadow.currentTime=0;
document.getElementById("start").disabled=false;
document.getElementById("pause").disabled=true;
this.disabled=true;
}
// for every time divisible by 5, output feedback
function reportProgress() {
var time = Math.round(this.currentTime);
var div = document.getElementById("feedback");
div.innerHTML = time + " seconds";
}
</script>
</head>
<body>
<video id="meadow" poster="purples.jpg" >
<source src="meadow.m4v" type="video/mp4"/>
<source src="meadow.ogv" type="video/ogg" />
</video>
<div id="feedback"></div>
<div id="controls">
<button id="start">Play</button>
<button id="stop">Stop</button>
<button id="pause">Pause</button>
</controls>
</body>
EXPLAIN
The new HTML5 video element, as with the HTML5 audio element, can be controlled
with its own built-in controls, or you can provide your own.
The media elements support the following methods:
• play: Starts playing the video
• pause: Pauses the video
• load: Preloads the video without starting play
• canPlayType: Tests if the user agent supports the video type
The media elements don’t support a stop method, so the code emulates one by pausing
video play and then setting the video’s currentTime attribute to 0,
which basically resets
the play start time.
I also used currentTime to print out the video time, using Math.round to round the
time to the nearest second.
The video control is providing two different video codecs: H.264 (.mp4), and Ogg
Theora (.ogv). Firefox, Opera, and Chrome support Ogg Theora, but Safari and IE only
support the H.264-formatted video.
However, by providing both types, the video works
in all of the browsers that support the video element.
The video and audio controls are inherently keyboard-accessible.
If you do replace the
controls, you’ll want to provide accessibility information with your replacements. The
video control doesn’t have built-in captioning, but work is underway to provide the API
for captioning.
Join Our Telegram Channel to Stay Updated
No comments:
Post a Comment