HTML5の重要なオーディオおよびビデオイベント-jsチュートリアル-php.cn

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

Essential Audio and Video Events for HTML5

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

コアポイント

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

イベントを再生

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

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

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

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

.paused

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

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

ログイン後にコピー

メソッドを手動で呼び出すことで解決できます。

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

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

ログイン後にコピー

イベントの読み込み

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

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

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

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

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

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

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

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

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

「進行状況」イベント

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

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

データ自体は一連の時間範囲で表され、「進行状況」イベントを使用する前にこれらの時間の範囲がどのように機能するかを理解することが重要です。

preload

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

時間の更新イベント

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

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

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

結論

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

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

以上がHTML5の重要なオーディオおよびビデオイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。