オーディオとビデオのメディア要素

HTML5は追加<autdio>と<映像>、人々は、Webページ内のオーディオおよびビデオコンテンツを埋め込むことができるようになりますFlashやその他のプラグインを必要としないことができます。

1、使用状況や財産

SRC:メディアファイルを指します

幅:幅設定要素

高さ:要素の高さを設定します

ポスター:指定された負荷映像が表示されるURI

コントロール:ディスプレイは、UIコントロールが付属しています

すべてのブラウザは、すべてのメディアフォーマットをサポートしていないので、あなたは、src属性で指定されなくなったラベルを複数のメディアソースを指定することができますので、あなたは内の1つまたは複数の<source>タグを使用することができます

    <div> 
        <動画ID = "ビデオ"幅= "500pxなど"高さ= "400ピクセル"のポスター= "IMG / BG.png"制御自動再生= "自動再生"> 
            <ソースSRC = "メディア/ v1.mp4"タイプ=」ビデオ/ MP4" > 
            不支持视频播放
         </ビデオ> 
        <BR> 


        <ビデオSRC = "メディア/ v1.mp4"幅= "500pxなど"高さ= "400ピクセル"> </ビデオ> 
        <BR> 

        <オーディオのid =」 "コントロールスタイルは="高さ:100pxに;幅:500pxなど"> 
            <ソースSRC ="メディア/ au1.mp3 "> 
        </オーディオ> 
        <BR> 
        <オーディオSRC ="メディア/ au1.mp3"は> </オーディオコントロール>
    </ div>

 

2、<映像>と<オーディオ>要素の共通の属性

自動再生:ブール、自動再生フラグを取得または設定

バッファリング:イベント、イベントのダウンロード緩衝範囲を表すオブジェクトの範囲

bufferedBytes:バイト範囲は、ダウンロードされたオブジェクトをバッファリングされたバイトの範囲を示しています

bufferingRate:整数、ダウンロード処理は、毎秒の平均ビット数を受信しました

bufferingThrottled:ブラウザがバッファを絞るされているかどうかを示すブール値

コントロール:ブール値、またはプロパティを取得するためのコントロールを設定し、組み込みのコントロールブラウザを表示または非表示にします

currentLoop:整数、メディアファイルの数が循環してきました

currentSrc:現在のファイルを再生するURL文字列、

CURRENTTIME:浮動小数点数、再生する秒数

defaultPlaybackRate:フロート、デフォルトの再生速度を取得または設定します。デフォルトでは、修正するための開発者のみ1.0秒です

期間:浮動小数点、メディアの合計時間(秒)を再生します

終了:メディアファイルの再生が完了したかどうかを示すブール値

ループ:メディアファイルのループを取得または設定するかどうかをブール値、

ミュート:ブール値を、作ったりミュートに設定するかどうか

networkState:整数は、現在のメディアネットワークの接続状態を示す:0 4が表すロードされ、3が最初のフレームがロードされた意味、1つの読み込み2読み込みメタデータを表し、ヌル表します

彼は一時停止:プレーヤーが中断されているかどうかを示すブール値を

playbackRate:フロート、現在の再生速度を取得または設定します。ユーザーが速くなったり遅く、この値は、メディアの再生速度を変更することができます

演奏:イベントの範囲は、これまでのイベントの範囲を果たしてきました

readyStateの:メディアの準備ができているかどうかを示す整数。0は、現在のフレームを表示すると、2の再生を開始することができ、メディアが3を表すが再生終了を開始してもよい、1を表し、データが利用可能でないことを示し

シーク可能:時間、時間範囲を検索することができます

求めて:プレイヤーは、ファイル内の新しい場所に移動しているかどうかを示すブール値を

SRC:文字列、ソースメディアファイル。このプロパティをオーバーライドすることができます任意の時間

フロートを、メディアファイルが位置の再生を開始取得または設定し、秒単位で表されます。start

TotalBytesの整数、現在のリソースの合計バイト数

videoHeight:整数、ビデオ(必ずしも要素)のための高さ<動画>

videoWidth:<ビデオ>のための整数、ビデオ(必ずしも要素)幅

ボリューム:フロート、現在の音量を取得または設定し、0.0から1.0へのジョブ

 

多くのプロパティは、直接、直接<オーディオ>と<映像>要素を配置してもよいです

 

3つのイベント

<オーディオ>と<映像>は、異なる特性の変化を監視するイベントの多くを、トリガすることができ、これらの変更は、メディアプレーヤーの結果である可能性があり、それはプレイヤーのユーザ操作の結果である可能性があります

イベント トリガーとき
アボート 真ん中をダウンロード
遊べる ときに遊び、readyStateの値2
canplaythrough 再生することができ、かつ中断すべきではない、readyStateの値は3であります
canshowcurrentframe 現在のフレームは、ダウンロード、readyStateの値が1を完了しました
Dtunvalble 0のデータの準備ができていない、readyStateの値
durationchange 期間属性値の変更
空に ネットワーク接続が閉じられ
空の 発生したエラーは、メディアをダウンロードできません
エラー ネットワークエラーは、ダウンロード中に発生しました
負荷 すべてのメディアがロードされている(廃止)
loadeddata 最初のフレームは、メディアをロードされています
loadedmetadata メディアのメタデータがロードされています
loadstart 開始するためにダウンロード
休止 プレイは中断されました
遊びます プレイ開始
遊び プレイ中
進捗 ダウンロード
ratechange 再生スピードの変更
シーク 検索が終了
探求 私たちは、新しい場所に移動しています
失速 ブラウザがダウンロードしようとしますが、何のデータが受信されません
timeupdate 不合理であるか、または誤って更新CURRENTTIME
volumechange ボリュームのプロパティ値または属性値がミュート変更されました
待っています 再生は、より多くのデータをダウンロードするのを待つ、一時停止します

図4に示すように、方法

遊ぶ():再生を開始

()一時停止:一時停止を再生

canPlayType(MEDIATYPE):ブラウザがメディアファイル形式の指定されたMIMEタイプをサポートしているかどうかを検出します。戻り値は次のようになります。「おそらく」(遊び)、「たぶん」(一般的にもプレイしてもよい)、「」(空の文字列、再生できません)。

可能なMIMEタイプ:オーディオ/ MP4、オーディオ/ MPEG、オーディオ/ OGG、オーディオ/ wavファイル、ビデオ/ MP4、ビデオ/ OGG、ビデオ/ WEBM

 

<オーディオ>要素はまた、ネイティブJavaScriptのコンストラクタオーディオを持っている、オーディオはいつでも再生することができます。直接新しいインスタンスを作成し、ダウンロードが完了した後にファイルパスを渡すことができ、あなたは(プレーを呼び出すことができます)再生

   聞かせてBTN = document.querySelector( "#のBTN" ); 
    btn.addEventListener( "クリック"、EVT => { 

        VARのオーディオは= 新しいオーディオ( "メディア/ au1.mp3" ); 
        audio.addEventListener( "canplaythrough"、EV => { 
            audio.play(); 
        }、falseの); 

    }、)。

 

おすすめ

転載: www.cnblogs.com/zhanglw456/p/10981134.html