HTML and CSS Reference
In-Depth Information
EXAM TIP
If the browser supports the HTML5 video element, it doesn't show the fallback. In this
case, make sure that you have the valid
<source>
element specified for that browser. If you
don't, the video container shows an error in place of the control bar, saying that an invalid
link or file is specified.
Sometimes having more control over things is nice, or perhaps you just don't like the look
and feel of the default controls. This is where JavaScript comes in. You can create your own
control bar and substitute your own control buttons to enable users to control the video.
The following example adds a few custom image elements to the page and wires up some
JavaScript to control the video:
<head>
<style>
img:hover {
cursor: pointer;
}
</style>
<script>
var video;
window.onload = function () {
video = document.getElementById("sampleVideo");
}
function play() {
video.play();
}
function pause() {
video.pause();
}
function back() {
video.currentTime -= 10;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<video height="400" width="600" id="sampleVideo">
<source src="samplevideo.mp4" type="audio/mp4"/>
</video>
</td>
<td>
<img id="backButton" src="backword.png" onclick="back();"/><br/>
<img id="playButton" src="forward.png" onclick="play();"/><br/>
<img id="PauseButton" src="pause.png" onclick="pause();"/><br/>
</td>
</tr>
</table>
</body>
Search WWH ::
Custom Search