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" οntimeupdate="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 οnclick="play()">Play</button>
		<button οnclick="pause()">Pause</button>
		<button οnclick="stop()">Stop</button> 
		<br/>
		<button οnclick="speedUp()">Fast</button>
		<button οnclick="slowDown()">Slow</button>
		<button οnclick="normalSpeed()">Normal Speed</button>
	</div> 
</div>