コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > html5 カスタム プレーヤー コア コード_html5 チュートリアル スキル

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

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

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

好东西啊，摘了代码部分
関連ラベル：
html5 プレーヤー
ソース：php.cn
前の記事：テトリスの原則と具体的な手順の HTML5 JS 実装_html5 チュートリアルのスキル 次の記事：HTML5_html5 チュートリアル スキルにおける SVG キャンバスと画像の間の変換アイデアのコード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート