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>