html5 カスタム プレーヤー コア コード_html5 チュートリアル スキル

网页html

复制代

代码如下:

再生

セクション>

css样式

复制代码

代码如下:

body{
text-align:center;
}
ヘッダー、セクション、フッター、脇、ナビゲーション、記事、hgroup{
表示:ブロック;
}
#skin{
width:700px;
マージン:10px 自動;
パディング:5px;
背景:赤;
ボーダー:4px ソリッドブラック;
ボーダー半径:20px;
}
nav{
margin:5px 0px;
}
#buttons{
float:left;
幅:70ピクセル;
高さ:22px;
}
#defaultBar{
位置:相対;
浮動小数点:左;
幅:600ピクセル;
高さ:14px;
パディング:4px;
ボーダー: 1 ピクセル黒一色;
背景:黄色;
}
/*progressBar はdefaultBar 内部*/
#progressBar{
position:absolute;
幅:0px; /*javascript制御变化を使用*/
height:14px; /*とdefaultBarの高さは同じ*/
background:blue;
}

javascript代码

复制代码

代码如下:

function doFisrt()
{
barSize=600; //注意不要使用px单位，および不要用var，是全局变量
myMovie=document.getElementById('myMovie');
playButton=document.getElementById('playButton');
bar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('click',playOrPause,false); // 第三のパラメータは false、バブリングフェーズのイベントハンドラを登録します。
bar.addEventListener('click',clickedBar,false);
}
//制御映画播放と停止
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='プレイ';
window.clearInterval(updatedBar);
}else{
myMovie.play();
playButton.innerHTML='一時停止';
updatedBar=setInterval(update,500);
}
}
//制御进度条のアニメーション显示
function update(){
if(!myMovie.ended){
var size=parseInt(myMovie.currentTime* barSize/myMovie.duration);
progressBar.style.width=サイズ 'px';
}else{
progressBar.style.width='0px';
playButton.innerHTML='プレイ';
window.clearInterval(updatedBar);
}
}
//ネズミ标点击进度条制御方法
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.clearInterval(updatedBar);
}
}
window.addEventListener('load',doFisrt,false);

好东西啊，摘了代码部分