コメント:HTML5は新しいビデオタグを提供します。これは、プログラミングなしで直接ビデオを再生できます。プレーヤーをカスタマイズするために、数行の簡単なコードを書く必要があります。
WebページHTML<body>
<section>
<video>
<source src = "videos/induction.mp4">
</video>
<nav>
<div>
<ボタンタイプ= "ボタン"> play </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</nav>
</section>
</body>
CSSスタイル
体{
テキストアライグ:センター;
}
ヘッダー、セクション、フッター、脇、nav、記事、hgroup {
表示:ブロック;
}
#肌{
幅:700px;
マージン:10px Auto;
パディング:5px;
背景:赤;
ボーダー:4pxソリッドブラック。
ボーダーラジウス:20px;
}
nav {
マージン:5px 0px;
}
#buttons {
フロート:左;
幅:70px;
高さ:22px;
}
#defaultbar {
位置:相対;
フロート:左;
幅:600px;
高さ:14px;
パディング:4px;
ボーダー:1pxソリッドブラック。
背景:黄色。
}
/*ProgressBarはdefaultbar内にあります*/
#progressbar {
位置:絶対;
幅:0px; /*javascriptによる変更の制御*/
高さ:14px; /*およびdefaultbarは同じ高さです*/
背景:青;
}
JavaScriptコード
関数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); // 3番目のパラメーターは常にfalseで、バブリングフェーズのイベントハンドラーを登録します。
bar.addeventlistener( 'click'、clickedbar、false);
}
//映画の再生を制御して停止します
関数prayorpause(){
if(!mymovie.paused &&!mymovie.ended){
mymovie.pause();
playbutton.innerhtml = 'play';
window.clearinterval(updatedbar);
}それ以外{
mymovie.play();
playbutton.innerhtml = 'Pause';
updatedBar = setInterval(update、500);
}
}
//進行状況バーの動的表示を制御します
function update(){
if(!mymovie.ended){
var size = parseint(mymovie.currenttime*barsize/mymovie.duration);
Progressbar.style.width = size+'px';
}それ以外{
Progressbar.style.width = '0px';
playbutton.innerhtml = 'play';
window.clearinterval(updatedbar);
}
}
//マウスクリックプログレスバー制御方法
関数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);
良いこと、私はコード部分を取りました