コメント:この記事では、HTML5 Music Playerのオーディオタグの使用に関する詳細な概要を説明します。 HTML5が好きな友達はそれを参照できます。それがあなたに役立つことを願っています。
<Audio>タグプロパティ:SRC:Music URLPRELOAD:プリロードオートプレイ:オートプレイループ:ループコントロール:ブラウザー独自のコントロールバー
<audioid = "media" src = "http://www.abc.com/test.mp3" controls> </audio>
<video>タグプロパティ:SRC:ビデオポスターのURL:ビデオカバー、プレイがないときに表示される画像プリロード:プリロードオートプレイ:オートプレイループ:ループコントロール:ブラウザ独自のコントロールバー幅:ビデオ幅の高さ:ビデオ高さ
<ビデオID = "Media" src = "http://www.abc.com/test.mp4" controlsheigt = "400px"> </video>
htmlvideoelementおよびhtmlaudioelementオブジェクトを取得します
// Audioは、新規を介して直接オブジェクトを作成できます
Media = newAudio( "http://www.abc.com/test.mp3");
//オーディオとビデオの両方がタグを介してオブジェクトを取得できます
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を返したり設定したりします
media.canplayType(タイプ); //特定の形式のリソースを再生できますか
media.networkState; // 0。この要素は初期化されていません。1。通常はネットワークを使用していません。2。データがダウンロードされています3。リソースが見つかりません
media.load(); // SRCによって指定されたリソースをリロードします
media.buffered; //バッファーエリア、タイマーに戻ります
media.preload; //なし:プリロードメタデータではありません:リソース情報のプリロード自動:
//準備ができた状態
Media.ReadyState; // 1:have_nothing 2:have_metadata 3.have_current_data 4.have_future_data 5.have_enough_data
Media.seeking; //それは求めていますか
//リプレイステータス
media.currenttime = value; //現在の再生位置では、割り当ては位置を変更できます
media.starttime; //一般に0、それが0から開始されないストリーミングメディアまたはリソースである場合、それは0ではありません。
Media.Duration; //現在のリソース長いストリームは無限に戻ります
media.paused; //一時停止するかどうか
Media.DefaultPlayBackRate = value; //デフォルトの再生速度を設定できます
media.playbackrate = value; //現在の再生速度は設定後すぐに変更されます
media.played; //このオブジェクトについては、プレイ可能なエリア、タイマー、以下を参照してください
media.seekable; //タイマーを探すことができるエリアに戻ります
Media.Edend; //終了しましたか
media.autoplay; //自動的に再生されますか
media.loop; //ループを再生するかどうか
media.play(); //遊ぶ
media.pause(); //一時停止
//コントロール
Media.Controls; //デフォルトのコントロールバーはありますか
media.volume = value; //音量
media.muted = value; //ミュート
// Timeranges(領域)オブジェクト
Timeranges.length; //エリアセグメントの数
Timeranges.start(index)//インデックスセクション領域の開始位置
Timeranges.End(index)//インデックスセクション領域の終了位置
イベント:
eventTester = function(e){
media.addeventlistener(e、function(){
console.log((newdate())。getTime()、e);
});
}
EventTester( "LoadStart"); //クライアントはデータの要求を開始します
EventTester( "Progress"); //クライアントはデータを要求しています
EventTester( "Suspend"); //ダウンロードの遅延
EventTester( "Abort"); //クライアントはダウンロードを積極的に終了します(エラーによるものではありません)、
EventTester( "エラー"); //データのリクエスト中にエラーが発生しました
EventTester( "Stalled"); //ネットワーク速度を停止します
EventTester( "Play"); // play()と自動再生が再生を開始するとトリガーされます
EventTester( "Pause"); //一時停止()トリガー
EventTester( "LoadedMetadata"); //リソースの長さを正常に取得します
EventTester( "LoadedData"); //
EventTester( "Waiting"); //エラーではなく、データを待っています
EventTester( "Playing"); //再生を開始します
EventTester( "Canplay"); //遊ぶことができますが、中央にロードされるために一時停止される可能性があります
EventTester( "Canplaythrough"); //プレイでき、すべての曲がロードされます
EventTester( "Seeking"); //検索
EventTester( "Seeced"); //検索完了
EventTester( "TimeUpDate"); //再生時間の変更
EventTester( "Ended"); //再生は終了します
EventTester( "Ratechange"); //再生率が変更されます
EventTester( "DurationChange"); //リソースの長さの変更
EventTester( "Volumechange"); //ボリュームの変更
私自身によって書かれたJSの段落:
$(function(){
var p = new Player();
p.read( "play");
$( "#stop")。クリック(function(){
p.pause();
});
$( "#start")。クリック(function(){
p.play();
});
$( "#show")。クリック(function(){
alert(p.duration());
});
setInterval(function(){
$( "#currentTime")。text(p.currenttime());
}、1000);
});
function player(){};
player.prototype = {
ボックス:新しいオブジェクト()、
読む:function(id){
this.box = document.getElementById(id);
}、
再生:function(){
this.box.play();
}、
一時停止:function(){
this.box.pause();
}、
src:function(url){
this.box.src = url;
}、
現在の時間:function(){
return(this.box.currenttime/60).tofixed(2);
}
};
player.prototype.duration = function(){
return(this.box.duration/60).tofixed(2);
};