HTML5 ビデオタグ_html5 チュートリアル スキルの属性、メソッド、イベントの概要の紹介

少し前に HTML5 ビデオに基づいてビデオ プレーヤーを作成しましたが、最初は理解できませんでしたが、その後、基本的に完全なカスタム プレーヤーを作成できました。この過程で、video タグの属性、メソッド、イベントについて包括的に理解しました。カテゴリは以下にリストされています。

コードをコピー

コードは次のとおりです:

src: ビデオの属性
poster: ビデオのカバー、再生中に画像は表示されません
preload: プリロード中
autoplay: 自動再生
loop: ループ再生
コントロール: ブラウザーに付属のコントロール バー
width: ビデオの幅
height: ビデオの高さ

html コード

コードをコピー

コードは次のとおりです:

> // オーディオとビデオの両方が JS を通じてオブジェクトを取得でき、JS は ID

を通じてビデオとオーディオ オブジェクトを取得します。

ビデオ オブジェクトを取得します

コードをコピーしますコードは次のとおりです:

Media = document.getElementById("media");

メディアのメソッドとプロパティ: HTMLVideoElement と HTMLAudioElement はどちらも HTMLMediaElement

を継承します。

コードをコピーしますコードは次のとおりです:

Media.error; //null: 正常
Media.error.code; //1. ユーザーの終了 2. ネットワーク エラー 3. デコード エラー 4. 無効な URL
/ /ネットワークステータス
- Media.currentSrc; //現在のリソースのURLを返す
- Media.src = value; //現在のリソースのURLを返すまたは設定します
.canPlayType( type); //特定の形式のリソースが再生可能かどうか
- Media.networkState; //0. この要素は初期化されていません 1. 通常ですがネットワークを使用していません 2. データがダウンロードされています。リソースが見つかりません
- Media.load(); // src で指定されたリソースを再ロードします。
- Media.buffered; // バッファー領域に戻ります。
- Media.preload; //メタデータをプリロードしない: リソースをプリロードする 情報 auto:

//準備完了状態
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; /探しているかどうか

//再生ステータス

Media.currentTime = value; //現在の再生位置、値を割り当てると位置が変更される可能性があります
Media.startTime; //ストリーミング メディアまたは 0 から開始しないリソースの場合は、通常 0。 、0 にはなりません
Media.duration; //現在のリソース長ストリームは無限を返します
Media.paused; //一時停止するかどうか
Media.defaultPlaybackRate = value; be set
Media.playbackRate = value; //現在の再生速度、設定直後に変更します
Media.played; //再生された領域、TimeRanges を返します、このオブジェクトについては以下を参照してください
Media。シーク可能; // シーク可能な領域を返します。
Media.ended // 終了するかどうか。
Media.loop; // ループ再生するかどうか。
Media.play(); // 再生
Media.pause(); // 一時停止
//ビデオ制御

Media.controls;//デフォルトのコントロールバーがあるかどうか
Media.volume = value; //ボリューム
Media.muted = value; //Mute
TimeRanges (エリア) オブジェクト
TimeRanges.length; // セグメント領域の数
TimeRanges.start(index) // インデックスセグメント領域の開始位置
TimeRanges.end(index) // インデックスセグメント領域の終了位置

vareventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
}, false);
}
eventTester("loadstart"); //クライアントはデータのリクエストを開始します
eventTester("progress"); //クライアントはデータをリクエストしています
eventTester("suspend") ) ; //遅延ダウンロード
eventTester("abort"); //クライアントはダウンロードを積極的に終了します(エラーのためではありません)
eventTester("loadstart") //クライアントはデータのリクエストを開始します
eventTester( "progress"); // クライアントはデータを要求しています
eventTester("suspend"); // 遅延したダウンロード
eventTester("abort"); // クライアントはダウンロードを積極的に終了します。エラーが発生しました),
eventTester("error"); //データのリクエスト中にエラーが発生しました
eventTester("stalled"); //ネットワーク速度が停止しました
eventTester("play"); /play() と autoplay 再生開始時にトリガーされます
eventTester("pause"); //pause() がトリガーされました
eventTester("loadedmetadata") //リソース長の取得に成功しました
eventTester("loadeddata") ); //
eventTester("waiting"); //エラーではなくデータを待機しています
eventTester("canplay");再生しますが、読み込みにより中断される可能性があります。 Pause
eventTester("canplaythrough"); //再生可能、すべての曲が読み込まれています
eventTester("seeking") //検索中
eventTester(" Seeed"); //検索完了
eventTester("timeupdate"); //再生時間変更
eventTester("ended"); //再生終了
eventTester("ratechange"); //再生中レート変更
eventTester("durationchange" ); //リソースの長さの変更
eventTester("volumechange") //ボリュームの変更