這個還是承接上一篇文章《光碟片項目所學》，是在光碟片項目中需要的一些簡單的技術，自己在學習的過程中做的一個demo。關於html5方面，我並沒有太多的深入研究，所以也說不出什麼理論的東西，僅將範例程式碼貼出來，以便各位讀者參考。另外在我的資源中也有更多的程式碼範例，可以點擊下載（免費的哦）
原理方面的東西可以去w3school中去查看一下，蠻簡單的，另外也可以下載些書看看，一看就懂。當然我這個例子中講的也挺全的哦。
是我樣本的目錄結構：
html代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Sundensky's website</title><link rel="stylesheet" href="../css/vedio.css"/><script type="text/javascript" src="../js/vedio.js"></script></head><body><section id="skin"><video id="myMovie" width="640" height="360"><source src="../../movie/1.mp4"></source></video><nav><div id="buttons"><button type="button" id="playButton">Play</button></div><div id="defaultBar"> <div id="progressBar"></div></div><div style="clear:both"></div></nav></section></body></html>
css代碼：
@CHARSET "UTF-8";body{text-align:center;}header,section,footer,aside,nav,article,hgroup{display:block;}#skin{width:700px;margin:10px auto;padding:5px;background:red;border:4px solid black;border-radius:10px;}nav{margin:5px 0px;}#buttons{float:left;width:70px;height:22px;}#defaultBar{position:relative;float:left;width:600px;height:16px;padding:4px;border:2px solid black;background:yellow;}#progressBar{position:absolute;width:0px;height:16px;background:blue;}
Javascript代碼：
function doFirst() {barSize=600;myMovie=document.getElementById("myMovie");playButton=document.getElementById("playButton");bar=document.getElementById("defaultBar");progeressBar=document.getElementById("progressBar");playButton.addEventListener("click", playOrPause, false);bar.addEventListener("click", clickedBar, false);}function playOrPause() {if (!myMovie.paused && !myMovie.ended) {myMovie.pause();playButton.innerHTML="Play";window.clearInterval(updateBar);} else {myMovie.play();playButton.innerHTML="Pause";updateBar=setInterval(update,500);}}function update() {if (!myMovie.ended) {var size = parseInt(myMovie.currentTime*barSize/myMovie.duration);progressBar.style.width=size+'px';} else {progressBar.style.width='0px';playButton.innerHTML="Play";window.clearInterval(updateBar);}}function clickedBar(e) {if(!myMovie.paused && !myMovie.ended) {var mouseX = e.pageX-bar.offsetLeft;var newtime = mouseX*myMovie.duration/barSize;myMovie.currentTime = newtime;progressBar.style.width=mouseX+'px';}}window.addEventListener("load",doFirst,false);
至於視頻檔案，可以自己去找幾個做測試，只支援ogg、mp4、mkv的。
：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
