ホームページ > 記事 > ウェブフロントエンド > HTML5 での audio タグと video タグの使用
この記事は主に HTML5 での audio タグと video タグの使用方法を紹介しています。これは、必要な友達と共有できるようになりました。
最近作成した WeChat 共有ページには多くの声が寄せられています。ビデオでは、関連するメソッド属性の多くがこれまで触れられていないことが示されているため、今すぐ記録してください。
1. まず、2 つのタグに関する基本情報を理解します:
2 つのタグの基本属性:
プロパティ | 説明 |
---|---|
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 オブジェクト | |
オーディオ/ビデオの音量を設定または返します |
Description | テキストトラックを追加() | ||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
canPlayType() | |||||||||||||||||||||||||||||||||||||||||||||||
load() | |||||||||||||||||||||||||||||||||||||||||||||||
play() | |||||||||||||||||||||||||||||||||||||||||||||||
pause() | |||||||||||||||||||||||||||||||||||||||||||||||
イベント | 説明 |
---|---|
中止 | オーディオ/ビデオの読み込みが放棄されたとき |
再生できるとき | ブラウザがオーディオ/ビデオを再生できるとき |
プレイスルーできるとき | としてブラウザ バッファリングにより一時停止せずに再生可能な場合 |
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 での audio タグと video タグの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。