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

この記事は主に 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 サイトの他の関連記事を参照してください。