Java Reference
In-Depth Information
Like the other media event handlers, volumechangeHandler() is responsible for changing the text of
buttons in the UI. But to know which text value to use, you have to check the value of video.muted .
You use the ternary operator here to reduce the code to a single line. You could use if...else if you
wanted to:
if (video.muted) {
muteButton.innerHTML = "Unmute";
} else {
muteButton.innerHTML = "Mute";
}
This approach would be ideal if you needed to execute more code within the if...else statement, but
in this case, the ternary approach might be better.
Next is the playbackClick() function, and it has changed significantly. Because the pause and
playing event handlers are responsible for updating the UI, the playbackClick() function is only
responsible for playing and pausing the media:
function playbackClick(e) {
video.paused ? video.play() : video.pause();
}
Once again, you use the ternary operator to determine which method to execute. If video.paused is
true , you call the play() method. Otherwise, you call pause() .
The muteClick() function has also been simplified because it is no longer responsible for updating the
UI. It is solely responsible for muting and unmuting the media:
function muteClick(e) {
video.muted = !video.muted;
}
You set the muted property to the opposite value. Therefore, if muted is true , it's set to false , and vice
versa.
Native media is a feature that web developers have clamored for, for many years, and the first
implementation (as specified by HTML5) is very robust and feature‐filled. We unfortunately,
however, still have to battle with the different browsers and the codecs they support. Hopefully, the
web development community will see a unified set of codecs that are supported by all browsers.
Naturally, we've only scratched the surface of the native media API and what you can do with it. As
with everything, experiment! The sky's the limit with such a robust and capable API.
summarY
This chapter introduced you to the HTML5 video and audio API.
You learned that HTML5 brings two new media elements: <video/> and <audio/> . It also
defines a <source/> element to describe a media source.
 
Search WWH ::




Custom Search