HTML and CSS Reference
In-Depth Information
The fallback content displays only if a browser does not support HTML5 video at all. If the browser does support
HTML5 video but you haven't provided a file in a format it can play, the browser just shows an empty black box.
Other <video> Attributes
In addition to the
poster
attribute, you can use a few other attributes on the
<video>
element. You won't be us-
ing the following attributes in the example website, but they are useful to know about.
The
autoplay
attribute tells the browser to start playing the video as soon as the page finishes loading. This is a
Boolean
attribute; it has no value because its presence alone is enough to prompt an action by the browser.
<video src="." width="." height="."
autoplay
></video>
Be sure to use the
autoplay
attribute wisely. It can be annoying for users if your video starts playing on its own. If
you are going to use the
autoplay
attribute, consider using the
muted
attribute too. The
muted
attribute simply
mutes the audio track of the video. Again this is a Boolean attribute.
<video src="." width="." height="."
muted
></video>
The
muted
attribute is not supported in Safari and IE9 (and earlier versions).
The
loop
attribute causes a video or audio clip to repeat itself every time it finishes. This attribute is particularly
useful when applied to
<audio>
elements.
<audio src="." width="." height="."
loop
></audio>
Creating Custom Controls Using JavaScript
So far in this chapter, you have relied on the browser's default controls for controlling playback. In this section, you
get rid of these default controls and build your own custom controls that allow the user to play, pause, seek, and mute
your video as well as control the volume.
The
<video>
and
<audio>
elements both have the same underlying interface,
HTMLMedia
Element
. This interface allows you to interact with the video and audio content in your pages using JavaScript. As
you progress through this chapter, you learn about the various methods and properties that you can use to control
your media content. Again, in this section, you focus on video—but everything you learn here applies to audio, too.
Before you can start building your custom playback controls, you first need to add a JavaScript file to your project.
This file contains all the JavaScript code that controls the video.
