html5 自訂播放器核心程式碼_html5教學技巧

網頁html

複製程式碼

程式碼如下：

影片>

播放按鈕>

節>
身體>

css樣式

css樣式css樣式

複製代碼


代碼如下：


正文{
文本對齊：中心；
}
頁眉、部分、頁腳、旁白、導航、文章、hgroup{
顯示：塊；
}
#skin{
寬度：700px;
邊距：10px 自動；
內
內邊距：5px;
背景：紅色；
邊框：4px 純黑；
邊框半徑：20px;
}
導航{
邊距：5px 0px;
;
; }
#buttons{
float:left;
寬度：70px；
高度：22px；
}
#defaultBar{
位置：相對；
浮動：左;
寬度：600px;
高度：14px;
內邊距：4px;
邊框：1px純黑;

背景：黃色；
}
/** progressBar在defaultBar內部*/
#progressBar{

position:absolute;

寬度：0px； /*使用javascript控制變化*/ height:14px; /*和defaultBar高度相同*/ background:blue; }

javascript代碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼




函數doFisrt()
{
barSize=600; //注意不要使用px單位，且不要用var，是全域變數
myMovie=document. getElementById('myMovie');
playButton=document.getElementById('playButton');
bar=document.getElementById('defaultBar');
progressBar=document.getElementById('progresso'); 🎜>playButton.addEventListener('點擊',playOrPause,false); //第三個參數總是false，為冒泡階段註冊事件處理程序。
bar.addEventListener('click',clickedBar,false);
}
//控制電影播放和停止
function playOrPause(){
if(!myMovie.paused & !myMovie .end){
myMovie.pause();
playButton.innerHTML='播放';
window.clearInterval(updatedBar);
}其他{
myMovie.play();
playButton.innerHTML='暫停';
updatedBar=setInterval(update,500);
}
}
//控制細節條的動態顯示
function update(){

if(!myMovie.ished){
var size=parseInt(myMovie.currentTime* barSize/myMovie.duration); progressBar.style.width=size 'px'; 🎜>progressBar.style.width='0px'; playButton.innerHTML='播放'; window.clearInterval(updatedBar); } } ////點擊點擊進度條控制方法function clickedBar(e){ if(!myMovie.paused && !myMovie.ending){ var mouseX= e.pageX-bar.offsetLeft; var newtime=mouseXmyMovie-bar.offsetLeft; var newtime=mouseXmyMovie .duration/barSize; //新的開始時間myMovie.currentTime=newtime; progressBar.style.width=mouseX 'px'; window.clearInterval(updatedBar); } window.clearInterval(updatedBar); } } } window.addEventListener('load',doFisrt,false); 好東西啊，摘了程式碼部分