Java Reference
In-Depth Information
}
video.load();
video.play();
This code uses the
canPlayType()
method to determine if the browser supports the WebM format.
If it does, the video's
src
property (which you learn more about in the next section) is set to the
WebM version of the video. If WebM isn't supported, the browser's
src
is set to the MP4 version.
Then, after the video is loaded with the
load()
method, the
play()
method plays the video.
Controlling Media playback
trY it out
Let's apply some of this newfound knowledge with a simple example. You write a web page that plays
and pauses a video. Note that this example assumes you have two videos:
bbb.mp4
and
bbb.webm
. Open
your text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 15: Example 1</title>
</head>
<body>
<div>
<button id="playbackController">Play</button>
</div>
<video id="bbbVideo">
<source src="bbb.mp4" />
<source src="bbb.webm" />
</video>
<script>
function playbackClick(e) {
var target = e.target;
var video = document.getElementById("bbbVideo");
if (target.innerHTML == "Play") {
video.play();
target.innerHTML = "Pause";
} else {
video.pause();
target.innerHTML = "Play";
}
}
document.getElementById("playbackController")
.addEventListener("click", playbackClick);
</script>
</body>
</html>
Save this file as
ch15 _ example1.html
and open it in your browser. You should see a button with the
text Play and a video directly beneath it as shown in Figure 15-4.
