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

好东西啊，摘了代码部分

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7621

15

CakePHP チュートリアル

1389

52

Steamのアカウント名の形式は何ですか

89

11

Win11 Activation Key Permanent

70

19

NYTの接続はヒントと回答です

31

136

もっと見る