Java Reference
In-Depth Information
➤
Unsurprisingly, different browsers support different video and audio formats and codecs, but
you can address this issue by providing multiple sources. The browser is smart enough to
know which one to load.
➤
Video and audio are programmatically identical—except video has a
poster
property. Both
types of media are represented as
HTMLMediaElement
objects in the DOM.
➤
You learned how to play and pause media.
➤
You learned how to mute media and query the state of playback using the
paused
property.
➤
You learned how to register event listeners for the many media‐based events, which allowed
you to simplify your custom UI's code.
exerCises
You can find suggested solutions for these questions in Appendix A.
1.
Being able to control playback is cool, but your custom UI needs to also control volume. Add
an
<input type="range" />
element to Example 3 to control the volume. Remember that the
range of volume supported by media elements is 0.0 to 1.0. Look back at Chapter 11 if you
need a refresher of the range input type. This unfortunately will not work in IE.
2.
Add another range form control to Question 1's answer, and program it to seek the media. It
should also update as the media plays. Use the
durationchange
event to set the slider's max
value, and the
timeupdate
event to update the slider's value.
