<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第四个页面</title> <style> h1{ font-size: x-large; margin: 6px 0px; } video{ border:double 8px lightgray; } .videoContainer{ max-width: 450px; } #postionBar{ height: 30px; color:black; font-weight: bold; background: steelblue; text-align: center; } #postionBar span{ display: inline-block; width: 450px; margin-bottom: 5px; } #durationBar{ border: solid 1px; width: 450px; margin-bottom: 5px; } </style> <script type="text/javascript"> 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 = "Pausing......"; } } function progressUpdate(){ var postionBar = document.getElementById("postionBar"); postionBar.style.width = (video.currentTime/video.duration * 100) + "%"; display.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> </head> <body> <div class="videoContainer"> <video id="videoPlayer" ontimeupdate="progressUpdate()"> <source src="resource/梦想.mp4" type="audio/mp4"></source> </video> </div> <div> <div id="durationBar"> <div id="postionBar"> <span id="displayStatus"></span> </div> </div> </div> <button onclick="play()">Play</button> <button onclick="pause()">Pause</button> <button onclick="stop()">Stop</button> <button onclick="speedUp()">Fast</button> <button onclick="slowDown()">Slow</button> <button onclick="normalSpeed()">Normal</button> </body> </html>
