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

WBOY
リリース: 2016-05-16 15:48:31
オリジナル
1611 人が閲覧しました

网页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);

好东西啊,摘了代码部分
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!