HTML5のオーディオとビデオとブラウザの違いの分析の主要なイベントの詳細(xì)な説明

html5の<video></video>および<audio></audio>要素は、豊富なイベントメカニズムを提供します。 「プレイ」イベントなどの一部のイベントは一目ではっきりしていますが、「進(jìn)行狀況」イベントなどの他のイベントはより複雑です。この記事では、最も重要なメディアイベントのいくつかを詳細(xì)に調(diào)査し、そのトリガータイミング、関連屬性、および異なるブラウザ間の違いを分析します。

コアポイント

• html5の<video></video>および<audio></audio>要素はさまざまなイベントを提供します。一部は簡(jiǎn)単で理解しやすい（「プレイ」イベントなど）、より複雑なもの（「進(jìn)行狀況」イベントなど）です。
• プレイイベント（「プレイ」、「一時(shí)停止」、「終了」など）は、メディアの再生または操作の一時(shí)停止に応答し、対応するメディア機(jī)能とプロパティに対応します。ただし、一部のブラウザには、メディア再生が終了した場(chǎng)合、Opera、Safari、IE10などの例外がありますが、.pausedフラグは依然として虛偽である可能性があります。
• イベントの読み込みは、「LoadStart」、「Progress」、「LoadedMetadata」、「CanPlay」、「CanPlayThrough」イベントなど、メディアデータの障害の読み込みまたはロードに関連しています。しかし、それらの動(dòng)作は、ブラウザとpreload屬性によって異なります。
• 「進(jìn)行狀況」イベントは、ダウンロードデータ中に継続的にトリガーされ、ダウンロードの進(jìn)行狀況を示すために一連の時(shí)間範(fàn)囲が使用されます。ただし、Operaが2つの範(fàn)囲を作成するなど、ブラウザには違いがありますが、モバイルSafariはアクティビティの範(fàn)囲のみを保持します。
• 「TimeUpDate」イベントは、メディアの再生中に継続的にトリガーされ、他の要素をメディア再生と同期するために使用されます。このイベントには通常、ブラウザのエラーや違いはありません。

イベントを再生

イベント応答メディアの再生または一時(shí)停止操作を再生します。これらのイベントは比較的簡(jiǎn)単です。

メディアがそれぞれ再生または一時(shí)停止するときに、「プレイ」と「一時(shí)停止」イベントが解雇されます。 「終了した」イベントは、メディアの再生の終わりに解雇されます。通常の再生の終わりであろうと、ユーザーが手動(dòng)でジャンプします。

最初の2つのイベントは、play()およびpause()メソッドに対応しています。最後の2つのイベントは、.pausedおよび.ended屬性に対応しています。 .pausedプロパティは、メディアが一時(shí)停止したときにデフォルトであるか、真のものです。 .ended ただし、Opera、Safari、およびIE10には重要な例外があります。メディアの再生が終了した場(chǎng)合、

フラグはまだ間違っています（論理的には、メディアが再生されなくなったため真であるはずです）。これは、この場(chǎng)合、単純な再生/一時(shí)停止ボタンハンドラーが失敗することを意味します：

.paused

この問題は、「終了」イベント応答で

button.addEventListener('click', function(e) {
  if(media.paused) {
    media.play();
  } else {
    media.pause();
  }
}, false);

メソッドを手動(dòng)で呼び出すことで解決できます。

pause()FirefoxとChromeは、「終了」イベントの前に「一時(shí)停止」イベントをトリガーすることにより、この問題を修正しました。

media.addEventListener('ended', function(e) {
  media.pause();
}, false);

イベントの読み込み

イベントの読み込みは、メディアデータの読み込み（またはロードに失敗した）に関連しています。これらのイベントの頻度は、メディアの読み込みステータス、つまりpreload屬性が使用されているかどうか、メディアがキャッシュされているかどうかに依存します。

すべての場(chǎng)合において、最初のイベントがトリガーされるのは「LoadStart」イベントであり、ブラウザがデータを探し始めたことを示しています。しかし、これは、ブラウザが検索を開始することのみを意味し、データが実際にロードされていること、またはメディアリソースが存在することさえ意味しません。

屬性の値が「none」の場(chǎng)合、「loadstart」イベントは、再生が始まる前にトリガーされる唯一のイベントです。また、preload屬性の値が「メタデータ」または「自動(dòng)」である場(chǎng)合、他の2つのイベントが間もなくトリガーされます：「進(jìn)行狀況」と「ロードメタダタ」。 （これらのイベントは、プリロードがない場(chǎng)合でも発生しますが、再生が始まるまで待ちます。）preload

「進(jìn)行狀況」イベントは比較的複雑であり、次のセクションで個(gè)別に説明します。 「Loadedmetadata」イベントはシンプルです。つまり、ブラウザはメディアの

を知るのに十分なメタデータを読み込んでいます（デフォルト値NANではなく、フローティングポイント番號(hào)として）。 .duration

もちろん、「LoadedMetadata」イベントは、メディアがロードできる場(chǎng)合にのみ起動(dòng)されます - 負(fù)荷が失敗した場(chǎng)合（たとえば、

404を返します）、メディアは「エラー」イベントを生成し、できません。さらにプレイする。 src

もう一度、いくつかの重要なブラウザの違いが発生しました。モバイルSafariでは、

設(shè)定は意図的に実裝されていないため、プロパティのすべての値はpreloadと同じように動(dòng)作します。対照的に、IE10では、メディアメタデータは常にデフォルトでロードされるため、preload="none"はpreload="none"と同じように動(dòng)作します。 preload="metadata"

「進(jìn)行狀況」イベント

「進(jìn)行狀況」イベントは、データのダウンロード中（およびのみ）発生し続けています。したがって、

は「なし」に設(shè)定されている場(chǎng)合、再生が開始される前にはまったくトリガーされません「自動(dòng)」、メディアファイル全體がダウンロードされるまで発生し続けます。 preload ただし、すべてのpreload設(shè)定では、再生が開始されると、ブラウザはロードするデータが殘っていないまでメディアファイル全體をダウンロードし続け、ビデオがその後一時(shí)停止されてもバックグラウンドダウンロードが継続されます。 preload

データ自體は一連の時(shí)間範(fàn)囲で表され、「進(jìn)行狀況」イベントを使用する前にこれらの時(shí)間の範(fàn)囲がどのように機(jī)能するかを理解することが重要です。

preload

（次のコンテンツは基本的に元のテキストと同じですが、いくつかの文は調(diào)整および磨かれており、大きな段落の直接コピーを回避し、元の意味を維持します）

時(shí)間の更新イベント

最後に、メディアの再生中に引き続きトリガーされているメディア「TimeUpDate」イベントを簡(jiǎn)単に紹介しましょう。このイベントを使用して、他のコンテンツをメディアの再生と同期させることができます。たとえば、手動(dòng)字幕の作成、転寫産物のアクティブラインの強(qiáng)調(diào)表示、複數(shù)のメディアソースの同期も同様です。

「TimeUpDate」イベントのトリガー周波數(shù)は指定されておらず、実際にはブラウザによって大きく異なります。しかし、全體の平均頻度は毎秒約3?5回であり、ほとんどの同期の目的で十分に正確です。

私が知る限り、このイベントにはブラウザのエラーや違いはありません。

結(jié)論

この記事では、他の再生やジャンプイベント、高度なネットワークステータスイベント、さらにはボリュームが変化したときにトリガーするものでさえ、可能なすべてのメディアイベントをカバーするわけではありません。しかし、私は最も重要なことだと思うものを取り上げました - ほとんどのシンプルなビデオとオーディオスクリプティングのニーズを満たすのに十分であり、基本的なカスタムインターフェイスを構(gòu)築するのに十分です。

（FAQの部分は基本的に元のテキストと同じですが、いくつかの文は調(diào)整および磨かれており、大きな段落の直接コピーを回避し、元の意味を維持しています）

以上がHTML5の重要なオーディオおよびビデオイベントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。