KnowHub

<ビデオ>、<オーディオ>

概要

<video> 要素はビデオを読み込むために使用され、HTMLVideoElement オブジェクトのインスタンスです。 <audio> 要素はオーディオをロードするために使用され、HTMLAudioElement オブジェクトのインスタンスです。 HTMLVideoElement と HTMLAudioElement は両方とも HTMLMediaElement を継承するため、これら 2 つの HTML 要素には多くの共通のプロパティとメソッドがあり、一緒に導入できます。

理論上、これら 2 つの HTML 要素は、「src」属性を使用してメディア ファイルを指定することで直接使用できます。

<オーディオ src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>

<video> 要素には幅と高さを指定できる width 属性と height 属性があることに注意してください。 <audio> 要素にはこれら 2 つの属性がありません。これは、プレーヤーの形状がブラウザによって与えられ、指定できないためです。

実際、ブラウザごとにサポートするメディア形式が異なるため、同じメディア ファイルの異なる形式を指定するには <source> 要素を使用する必要があります。

<オーディオ id="音楽">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type='audio/ogg コーデック="vorbis">
</オーディオ>

ブラウザは、サポートされている形式に遭遇すると、それ以降の形式を無視します。

どちらの要素にも controls 属性があり、この属性がオンになっている場合にのみ、コントロール バーが表示されます。 <audio> 要素が controls 属性をオンにしない場合、要素はまったく表示されず、バックグラウンドで直接再生されることに注意してください。

HTMLMediaElement インターフェース

HTMLMediaElement には対応する HTML 要素がありませんが、<video> と <audio> の基本クラスとして機能し、それらの共通のプロパティとメソッドの一部を定義します。

HTMLMediaElement インターフェースには次のプロパティがあります。

  • HTMLMediaElement.audioTracks: メディア ファイルに含まれるオーディオ トラックを表す配列のようなオブジェクトを返します。
  • HTMLMediaElement.autoplay: HTML 属性 autoplay に対応する、メディア ファイルが自動的に再生されるかどうかを示すブール値。
  • HTMLMediaElement.buffered: ブラウザによってバッファされたコンテンツを表す TimeRanges オブジェクトを返します。このオブジェクトの length プロパティは、キャッシュ内にあるコンテンツの数を返します。 start(rangeId) メソッドは、指定されたコンテンツの部分 (0 から開始) が開始される時点を返します。指定された時点のコンテンツの終わりを返します。このプロパティは読み取り専用です。
  • HTMLMediaElement.controls: HTML 属性 controls に対応する、メディア ファイルのコントロール バーを表示するかどうかを示すブール値。
  • HTMLMediaElement.controlsList: コントロール バーの特定のコントロールを表示するかどうかを示す配列のようなオブジェクトを返します。このオブジェクトには、「nodownload」、「nofullscreen」、「noremoteplayback」の 3 つの値が含まれます。このプロパティは読み取り専用です。
  • HTMLMediaElement.crossOrigin: HTML 属性 crossorigin に対応する、クロスドメインリクエストにユーザー情報 (Cookie など) が含まれるかどうかを示す文字列。この属性には、「anonymous」と「use-credentials」の 2 つの値しかありません。
  • HTMLMediaElement.currentSrc: 現在再生中のメディア ファイルの絶対パスを示す文字列。このプロパティは読み取り専用です。
  • HTMLMediaElement.currentTime: 現在の再生時点を示す浮動小数点数。
  • HTMLMediaElement.defaultMuted: HTML 属性 muted に対応する、デフォルトで音量をオフにするかどうかを示すブール値。
  • HTMLMediaElement.defaultPlaybackRate: デフォルトの再生レートを示す浮動小数点数。デフォルトは 1.0 です。
  • HTMLMediaElement.disableRemotePlayback: ブール値、リモート再生を許可するかどうか、つまりリモート再生中にツールバーが存在するかどうか。
  • HTMLMediaElement.duration: メディア ファイルの長さを示す浮動小数点数 (秒単位)。現在メディア ファイルがない場合、このプロパティは 0 を返します。このプロパティは読み取り専用です。
  • HTMLMediaElement.ended: 現在のメディア ファイルが終了したかどうかを示すブール値。このプロパティは読み取り専用です。
  • HTMLMediaElement.error: 報告された最新のエラーのエラー オブジェクトを返します。エラーが報告されない場合は、「null」が返されます。
  • HTMLMediaElement.loop: メディア ファイルがループで再生されるかどうかを示すブール値。HTML 属性 loop に対応します。
  • HTMLMediaElement.muted: ボリュームがオフになっているかどうかを示すブール値。
  • HTMLMediaElement.networkState: 現在のネットワーク ステータス。合計 4 つの可能な値。 0 はデータがないことを意味します。1 はメディア要素がアクティブであるがダウンロードが開始されていないことを意味します。3 はメディア ファイルが見つからなかったことを意味します。
  • HTMLMediaElement.paused: メディア ファイルが一時停止されているかどうかを示すブール値。このプロパティは読み取り専用です。
  • HTMLMediaElement.playbackRate: メディア ファイルの再生速度を示す浮動小数点数。1.0 が通常の速度です。負の数の場合は、逆方向に再生することを意味します。
  • HTMLMediaElement.played: 再生されたメディア コンテンツを表す TimeRanges オブジェクトを返します。このプロパティは読み取り専用です。
  • HTMLMediaElement.preload: どのコンテンツをプリロードするかを示す文字列。可能な値は「none」、「metadata」、「auto」です。
  • HTMLMediaElement.readyState: メディア ファイルの準備状況を示す整数。可能な値は 0 (データなし)、1 (メタデータが取得済み)、2 (現在のフレームは再生できますが、複数のフレームを再生するには十分ではありません) です。フレーム）、3（複数のフレーム、少なくとも 2 フレームを再生できます）、4（スムーズに再生できます）。このプロパティは読み取り専用です。
  • HTMLMediaElement.seekable: ユーザーが検索できるメディア コンテンツの範囲を表す TimeRanges オブジェクトを返します。このプロパティは読み取り専用です。
  • HTMLMediaElement.seeking: メディア ファイルが新しい場所を探しているかどうかを示すブール値。このプロパティは読み取り専用です。
  • HTMLMediaElement.src: メディア ファイルが配置されている URL を示す文字列。HTML 属性 src に対応します。
  • HTMLMediaElement.srcObject: src 属性に対応するメディア ファイル リソースを返します。これは、MediaStream、MediaSource、Blob、または File オブジェクトの場合があります。この属性を直接指定することでメディアファイルを再生することができます。
  • HTMLMediaElement.textTracks: すべてのテキスト トラックを含む配列のようなオブジェクトを返します。このプロパティは読み取り専用です。
  • HTMLMediaElement.videoTracks: 複数のビデオ トラックを含む配列のようなオブジェクトを返します。このプロパティは読み取り専用です。
  • HTMLMediaElement.volume: ボリュームを表す浮動小数点数。 0.0 はミュートを意味し、1.0 は最大音量を意味します。

HTMLMediaElement インターフェースには以下のメソッドがあります。

  • HTMLMediaElement.addTextTrack(): メディア ファイルにテキスト トラック (字幕など) を追加します。
  • HTMLMediaElement.captureStream(): 現在のメディア ファイルのストリーム コンテンツをキャプチャするために使用される MediaStream オブジェクトを返します。
  • HTMLMediaElement.canPlayType(): このメソッドは、このタイプのメディア ファイルを再生できるかどうかを決定するパラメータとして MIME 文字列を受け入れます。このメソッドは 3 つの可能な値を含む文字列を返します。「おそらく」は再生可能であることを意味し、「多分」は再生しないと再生可能かどうか判断できないことを意味し、空の文字列は再生できないことを意味します。
  • HTMLMediaElement.fastSeek(): このメソッドは、指定された時間 (秒単位) を表す浮動小数点数をパラメータとして受け取ります。このメソッドは、メディア ファイルを指定された時間に移動します。
  • HTMLMediaElement.load(): メディア ファイルを再読み込みします。
  • HTMLMediaElement.pause(): 再生を一時停止します。このメソッドには戻り値がありません。
  • HTMLMediaElement.play(): 再生を開始します。このメソッドは Promise オブジェクトを返します。

以下は play() メソッドの例です。

var myVideo = document.getElementById('myVideoElement');

私のビデオ
。遊ぶ（）
.then(() => {
  console.log('プレイ中');
})
.catch((エラー) => {
  コンソール.ログ(エラー);
});

HTMLVideoElement インターフェース

HTMLVideoElement インターフェースは <video> 要素を表します。このインターフェースは HTMLMediaElement インターフェースを継承しており、独自のプロパティとメソッドをいくつか持っています。

HTMLVideoElement インターフェイスのプロパティ。

  • HTMLVideoElement.height: HTML 属性 height に対応する、ビデオ再生領域の高さ (単位ピクセル) を示す文字列。
  • HTMLVideoElement.width: HTML 属性 width に対応する、ビデオ再生領域の幅 (単位ピクセル) を示す文字列。
  • HTMLVideoElement.videoHeight: このプロパティは読み取り専用で、ビデオ ファイル自体の高さ (単位ピクセル) を表す整数を返します。
  • HTMLVideoElement.videoWidth: このプロパティは読み取り専用で、ビデオ ファイル自体の幅 (ピクセル単位) を表す整数を返します。
  • HTMLVideoElement.poster: HTML 属性 poster に対応する、動画ファイルが取得できない場合に代わりに表示する画像ファイルの URL を表す文字列。

HTMLVideoElement インターフェースのメソッド。

  • HTMLVideoElement.getVideoPlaybackQuality(): 現在のビデオ再生のデータを含むオブジェクトを返します。

HTMLAudioElement インターフェース

HTMLAudioElement インターフェースは <audio> 要素を表します。

このインターフェースは HTMLMediaElement を継承しますが、独自のプロパティとメソッドは定義しません。ブラウザーは、HTMLAudioElement インスタンスを返す Audio() コンストラクターをネイティブに提供します。

var Song = new Audio([URLString]);

Audio() コンストラクターは、メディア ファイルの URL を表す文字列をパラメーターとして受け入れます。このパラメータを省略した場合は、後で src 属性を使用して指定できます。

HTMLAudioElement インスタンスを生成した後、DOM を挿入せずに play() メソッドを直接使用してバックグラウンドで再生できます。

var a = 新しいオーディオ();
if (a.canPlayType('audio/wav')) {
  a.src = '効果音.wav';
  a.play();
}

イベント

<video> 要素と <audio> 要素には次のイベントがあります。

-loadstart: メディア ファイルのロードを開始するときにトリガーされます。

  • 進行状況: メディア ファイルのロード プロセス中に、1 秒あたり約 2 ～ 8 回トリガーされます。 -loadedmetadata: メディア ファイルのメタデータが正常にロードされたときにトリガーされます。 -loadeddata: 現在の再生位置が正常にロードされた後にトリガーされます。
  • canplay: 十分なデータがロードされており、後でデータの再生を開始できるときにトリガーされます。
  • canplaythrough: 十分なデータがロードされ、継続的に再生できるときにトリガーされます。後でデータを要求し続ける必要はありません。
  • 一時停止: ダウンロードを一時的に停止するのに十分なデータがバッファリングされたときにトリガーされます。
  • 停止: データをロードしようとしたがデータが返されなかった場合にトリガーされます。
  • play: play() メソッドが呼び出されたとき、または自動再生が開始されたときにトリガーされます。十分なデータがロードされている場合、このイベントの後に「playing」イベントが続きます。そうでない場合は、「waiting」イベントがトリガーされます。
  • 待機中: キャッシュされたデータが不足しているために再生できないか、再生が停止した場合にトリガーされます。バッファリングされたデータが再生を開始するのに十分になると、その後に「playing」イベントが続きます。
  • 再生: メディアの再生が開始されるとトリガーされます。
  • timeupdate: 「currentTime」属性が変更されるとトリガーされ、1 秒あたり 4 ～ 60 回トリガーされる可能性があります。
  • 一時停止: pause() メソッドが呼び出され、再生が一時停止されるとトリガーされます。
  • シーク: スクリプトまたはユーザーが、バッファされていない特定の位置の再生を要求し、再生が停止してデータがロードされるとトリガーされます。このとき、seeking プロパティは true を返します。
  • seen: seeking 属性が false に戻るとトリガーされます。
  • 終了: メディア ファイルの再生が終了するとトリガーされます。 -durationchange: duration プロパティが変更されるとトリガーされます。
  • volumechange: 音量が変化するとトリガーされます。
  • ratechange: 再生速度またはデフォルトの再生速度が変更されるとトリガーされます。
  • abort: メディア ファイルのロードが停止したとき、通常はユーザーがダウンロードの停止を積極的に要求したときにトリガーされます。
  • エラー: ネットワークまたはその他の理由によりメディア ファイルをロードできない場合にトリガーされます。
  • 空: error または abort イベントにより、networkState 属性がデータを取得できなくなったときにトリガーされます。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章