ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 での audio タグと video タグの使用

HTML5 での audio タグと video タグの使用

不言
不言オリジナル
2018-04-27 14:09:242827ブラウズ

この記事は主に HTML5 での audio タグと video タグの使用方法を紹介しています。これは、必要な友達と共有できるようになりました。

最近作成した WeChat 共有ページには多くの声が寄せられています。ビデオでは、関連するメソッド属性の多くがこれまで触れられていないことが示されているため、今すぐ記録してください。

1. まず、2 つのタグに関する基本情報を理解します:

2 つのタグの基本属性:

または SrcStartdateTextTracks videoTracksvolume 両方のタグの基本メソッド:
プロパティ 説明
audioTracks 利用可能なオーディオトラックを表すAudioTrackListオブジェクトを返します
autoplay 読み込み完了後にすぐにオーディオ/ビデオを再生するかどうかを設定または返します
バッファリング オーディオ/ビデオのバッファリングされた部分を表す TimeRanges オブジェクトを返します
controller オーディオ/ビデオの現在のメディア コントローラーを表す MediaController オブジェクトを返します
controls ビデオ表示コントロール (再生/一時停止など)
crossOrigin オーディオ/ビデオの CORS を設定または返します 設定します
currentSrc 現在のオーディオ/ビデオの URL を返します
currentTime オーディオ/ビデオの位置 (秒単位) で現在の再生を設定または返します。
defaultMuted デフォルトでオーディオ/ビデオがミュートされているかどうかを設定または返します
defaultPlaybackRate オーディオ/ビデオのデフォルトの再生速度
duration 現在のオーディオ/ビデオの長さを返します (秒単位)
ended オーディオ/ビデオの再生が終了したかどうかを返します
error オーディオ/ビデオのエラーステータスを表す MediaError オブジェクトを返します
loop オーディオ/ビデオを再生するかどうかを設定または返します最後に再起動される Play
mediaGroup オーディオ/ビデオが属するグループを設定または返します (複数のオーディオ/ビデオ要素を接続するために使用されます)
muted オーディオ/ビデオが属するかどうかを設定または返しますミュートされています
networkState オーディオ/ビデオの現在のネットワークステータスを返します
paused オーディオ/ビデオが一時停止されているかどうかを設定または返します
playbackRate オーディオの速度を設定または返します/video playplay
played ビデオの再生部分の audio/TimeRanges オブジェクトを示すために戻ります
preload ページがロードされた後にオーディオ/ビデオをロードするかどうかを設定または返します
readyState オーディオ/ビデオの現在の準備完了状態を返します
seekable オーディオ/ビデオのアドレス指定可能な部分を表す TimeRanges オブジェクトを返します
seeking ユーザーがオーディオでシークしているかどうかを返します/ビデオ
設定を返すか、現在のソースのオーディオ/ビデオ要素を返します
現在の時間オフセットを示すために戻ります
テキスト軌道を持つ texttracklist オブジェクトに戻ります
返品利用可能なビデオトラックを表す VideoTrackList オブジェクト
オーディオ/ビデオの音量を設定または返します

Methodテキストトラックを追加()オーディオ/ビデオに新しいテキストトラックを追加しますcanPlayType()ブラウザが指定されたオーディオ/ビデオタイプを再生できるかどうかを検出しますload()オーディオ/ビデオ要素をリロードしますplay()オーディオ/ビデオの再生を開始しますpause()現在再生中のオーディオ/ビデオを一時停止します


両方のタグのイベント:

Description
イベント 説明
中止 オーディオ/ビデオの読み込みが放棄されたとき
再生できるとき ブラウザがオーディオ/ビデオを再生できるとき
プレイスルーできるとき としてブラウザ バッファリングにより一時停止せずに再生可能な場合
durationchange オーディオ/ビデオの再生時間が変更された場合
空の場合 現在のプレイリストが空の場合
終了 現在のプレイリストが空の場合プレイリストが終了しました
エラー オーディオ/ビデオの読み込み中にエラーが発生したとき
loadeddata ブラウザがオーディオ/ビデオの現在のフレームをロードしたとき
loadedmetadata ブラウザがオーディオ/ビデオのメタデータがロードされました
loadstart ブラウザがオーディオ/ビデオの検索を開始したとき
pause オーディオ/ビデオが一時停止されたとき
再生 オーディオ/ビデオが開始されたとき、または一時停止が解除されたとき
再生中 オーディオ/ビデオが一時停止またはバッファリングにより停止した後に準備ができたとき
進行状況 ブラウザはオーディオ/ビデオをダウンロードするとき
ratechange オーディオ/ビデオの再生速度が変更されたとき
シークしたとき ユーザーがオーディオ/ビデオ内の新しい位置に移動/ジャンプしたとき
シーキング ユーザーがオーディオ/ビデオ内の新しい位置に移動/ジャンプを開始したとき
停止したとき ブラウザがメディアデータを取得しようとしたが、データが利用できないとき
一時停止 ブラウザが意図的にメディアデータを取得しない場合
timeupdate 現在の再生位置が変更された場合
volumechange 音量が変更された場合
待機中

ビデオが再生された場合次のフレームをバッファする必要があるため停止します


2. プロジェクトでの使用: ビデオが読み込まれていない場合、ここでの画像の最初のフレームはバックグラウンドから送信されることがわかります。 video タグには、poster 属性があります。これは、ビデオの最初のフレームを表示するために特別に使用され、ビデオのカバー画像に相当します。ポスター属性は、ビデオのポスター属性値を設定または返すために使用されます。この属性は、ビデオのロード時、またはユーザーが再生ボタンをクリックする前に表示される画像を記述します。この属性が含まれていない場合は、ビデオの最初のフレームが代わりに使用されます。

<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>

オーディオを再生する場合、ブラウザはこのタイプのオーディオをサポートしていない可能性があるため、判断する必要があります。canPlayType() メソッドを使用して、ブラウザが指定されたオーディオ/ビデオ タイプを再生できるかどうかを確認してください。 canPlayType() メソッドは、次のいずれかの値を返すことができます:
"おそらく" - ブラウザーはこのオーディオ/ビデオ タイプをサポートする可能性が最も高いです
"maybe" - ブラウザーはこのオーディオ/ビデオ タイプをサポートする可能性があります

"" - (空の文字列) ブラウザーはこのオーディオ/ビデオ タイプをサポートしていません

使用構文:

audio.canPlayType("mp3"))

関連推奨事項:

HTML5 の sessionStorage オブジェクトについての深い理解

HTML5 ビデオ タグ操作の詳細なビデオ説明

以上がHTML5 での audio タグと video タグの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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