HTML and CSS Reference
In-Depth Information
<title>Custom Video Controls</title>
<meta charset="utf-8" />
</head>
<body>
<video id="videoobj" width="480" height="270"
poster="bigbuckposter.jpg"
controls>
<source src="videofile.mp4" type="video/mp4"/>
<source src="videofile.webm" type="video/webm" />
</video>
<div id="feedback"></div>
<div id="controls">
<button id="start">Play</button>
<button id="stop" disabled>Stop</button>
<button id="pause" disabled>Pause</button>
</div>
</body>
WARNING
As noted in
Chapter 1
, Opera displays the visual control if scripting is disabled regardless of whether
the
controls
attribute is present or not. However, other browsers don't, and this behavior may
change in the future. Don't depend on it.
Next, you'll need to add the CSS and JavaScript. The CSS is simple: just turn off the display
for the custom controls. When the script is loaded, it tests to see if the user agent can play
the video. If so, then the custom control is displayed. If not, then the custom controls remain
hidden:
<style>
#controls
{
display: none;
}
</style>
Add JavaScript to create an event listener function for each of the new button elements. You
could do this in the
window.onload
event handler function, to ensure the buttons have been
created and added to the DOM by the time you need to access them. However, since you're
also making the controls visible, you may want to add a scripting block following the video/
control combination.
The reason for adding a script block to set up the video controls just after the video element
is that a video resource can slow the window loading event enough that hiding the default
