Audio and Video - HTML5 with Visual Studio 2012 - page 185

ondurationchange="setupSeekVideo()"
onvolumechange="updateMuteVideo()">
<source src="~/Media/BigBuckBunny.webm" type="video/webm" />
<source src="~/Media/BigBuckBunny.mp4" type="video/mp4" />
<p>HTML5 video is not supported on your browser</p>
</video>

2. Add a new div after the video element and enter the following markup for it:

<div id="videoControls">
<input type="button" value="Play" id="playVideo" onclick="togglePlayVideo()" />
<input type="range" id="videoSeek" onchange="seekVideo()" />
<span id="durationVideo"></span>
<input type="button" id="muteVideo" value="Mute" onclick="toggleMuteVideo()" />
<input type="range" id="volumeVideo" min="0" max="1" step="any"
onchange="setVolumeVideo()" />
</div>

3. Add a new script element using the code shown in Listing 8-4. This code is

identical to the script used for the audio element except it uses the video element
and the video controls.

Listing 8-4. The JavaScript functions for the video controls
<script type="text/javascript">
var video=document.getElementById("video");
function setupSeekVideo() {
var seek=document.getElementById("videoSeek");
seek.min=0;
seek.max=video.duration;
seek.value=0;
var duration=document.getElementById("durationVideo");
duration.innerHTML="0/" + Math.round(video.duration);
}
function togglePlayVideo() {
if (video.paused || video.ended) {
video.play();
}
else {
video.pause();
}
}
function updatePlayPauseVideo() {
var play=document.getElementById("playVideo");
if (video.paused || video.ended) {
play.value="Play";
}
else {
play.value="Pause";
}
}
function endVideo() {