5.HTML5 音频和视频-2 (自定义播放器)

<div>
<script>
var video;
var display;

window.onload = function() {
video = document.getElementById("videoPlayer");

display = document.getElementById("displayStatus");

video.onplaying = function() {
display.innerHTML = "Playing ...";
}
video.onpause = function() {
display.innerHTML = "Paused";
}

//  video.onprogress = function() {
//displayStatus.innerHTML = "progggggggggggg";
//    var bufferBar = document.getElementById("bufferBar");
//    bufferBar.style.width = (video.seekable.length / video.duration * 100) + "%";

//  }
}

function progressUpdate() {
var positionBar = document.getElementById("positionBar");
positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";
}

function play() {
video.play();
}

function pause() {
video.pause();
}

function stop() {
video.pause();
video.currentTime = 0;
}

function speedUp() {
video.play();
video.playbackRate = 2;
}

function slowDown() {
video.play();
video.playbackRate = 0.5;
}

function normalSpeed() {
video.play();
video.playbackRate = 1;
}

</script>
<div class="videoContainer">
<video id="videoPlayer" ontimeupdate="progressUpdate()">
<source src="butterfly.mp4" type="video/mp4">
<source src="butterfly.ogv" type="video/ogg">
</video>
</div>

<div class="barContainer">
<div id="durationBar">
<div id="positionBar"><span id="displayStatus">Idle.</span></div>
</div>
</div>

<div>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="stop()">Stop</button>
<br/>
<button onclick="speedUp()">Fast</button>
<button onclick="slowDown()">Slow</button>
<button onclick="normalSpeed()">Normal Speed</button>
</div>
</div>