Java Reference
In-Depth Information
This code achieves the same results as the previous example; it sets
video.muted
to the opposite of
its current value.
The
src
property, however, is a bit different. It's clear that it sets the media of a
<video/>
or
<audio/>
element, but when you set the
src
of a media object, you have to load it explicitly with the
load()
method. Otherwise, whatever media is currently loaded by the browser will play when you
call the
play()
method. Therefore, the following code does not correctly change and play the media
of a media object:
// incorrect
video.src = "new_media.mp4";
video.play();
This code sets the
src
property, but it doesn't load the new media with the
load()
method.
Therefore, when the video plays again, it still plays the media currently loaded by the browser. To
fix this, you have to call
load()
before you call
play()
, like this:
video.src = "new_media.mp4";
video.load();
video.play();
Controlling Media playback II
trY it out
Let's revisit Example 1 and improve it by taking advantage of some of the
HTMLMediaElement
object's
properties. Open your text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 15: Example 2</title>
</head>
<body>
<div>
<button id="playbackController">Play</button>
<button id="muteController">Mute</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 (video.paused) {
video.play();
target.innerHTML = "Pause";
} else {
video.pause();
target.innerHTML = "Resume";
