コメント：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）;
良いこと、私はコード部分を取りました