html5ビデオとオーディオ：マークアップ - シットポイント

HTML5ビデオとオーディオタグの詳細な説明：レスポンシブビデオプレーヤーの構築

HTML5のビデオおよびオーディオタグにより、外部プラグインやプレーヤーを必要とせずに、HTMLコードに直接埋め込まれたビデオおよびオーディオ要素が可能になります。
HTML5ビデオとオーディオタグには、オートプレイ、コントロール、ループ、ミュート、ソースなど、これらの要素の動作を制御するための複数の属性が含まれています。
"HTML5ビデオファイルが見つかりません"エラーは通常、ブラウザがビデオタグのソースプロパティで指定されたビデオファイルを見つけたりアクセスできないときに発生します。
HTML5自体は、ビデオ組み込みの注釈機能を提供しませんが、JavaScriptとCSSを使用してカスタムアノテーションを作成できます。
• ビデオタグに複数のソースタグを含めることにより、HTML5ビデオに複数のソースを指定できるため、さまざまなブラウザーとの互換性を最大化できます。
タグ

コンテナ、コーデック、ライセンスの問題を扱った後、ビデオ要素のマーキングとそれらの関連属性を研究しましょう。

WebページにHTML5ビデオを含める最も簡単な方法は次のとおりです。

<video src="example.webm"></video>

<video height="280" src="example.webm" width="375"></video>

ネイティブコントロールを有効にします

埋め込まれたビデオは、ユーザーがボリュームを再生、一時停止、停止、早送り、または調整できるようにするために不可欠です。 HTML5のビデオ要素には、これを行うことができるコントロール属性が含まれています。

コントロールはブールプロパティなので、値は必要ありません。タグに含めると、ブラウザがユーザーがコントロールを表示し、アクセスできるようにします。

各ブラウザは、組み込みのビデオコントロールの外観を担当します。図5.1および図5.2は、ブラウザ全体のこれらのコントロールの外観の違いを示しています。

たとえば、関連するページに1つのビデオのみが含まれている場合 - つまり、ユーザーは特定のビデオを見るためだけにページへのリンクをクリックします - ビデオのサイズに応じて、周囲のコンテンツに応じて自動的に再生できます、プラットフォームと視聴者を表示します。

以下は、このプロパティの使用方法です

警告：モバイルブラウザはAutoplayを無視します

<video src="example.webm"></video>

ループ属性

ブールループプロパティを使用する前に2回考える必要がある別の利用可能なプロパティ。繰り返しますが、理解は簡単です。仕様によれば、このプロパティは、ブラウザに「リソースの終わりに到達したときにリソースの開始に戻る」ように指示します。

したがって、訪問者に退屈することを唯一の目的であるWebページを作成する場合、次のコードが含まれている可能性があります。

オートプレイと無限ループ！ネイティブコントロールを削除するだけで、最悪のトリオを入手できます。

<video height="280" src="example.webm" width="375"></video>

前述の2つのプロパティと比較して、多くの場合、プリロードプロパティは非常に便利です。プリロードプロパティは、3つの値のいずれかを受け入れます

• auto：ビデオとそれに関連するメタデータがビデオを再生する前にロードを開始することを示します。このようにして、ユーザーが要求すると、ブラウザはビデオの再生をより速く開始できます。
• なし：ユーザーが再生ボタンを押す前に、ビデオを背景にロードしないことを意味します。
• メタデータ：なしに似ていますが、ビデオ自体が読み込まれていなくても、ビデオに関連するメタデータ（そのサイズ、持続時間など）をプリロードできます。

Preloadプロパティには、省略された場合、これらの3つの値のうちどれがデフォルトの状態であるかを決定する場合、デフォルト値が定義されていません。これは、ビデオおよび/またはメタデータを、実際の副作用なしに、適切に接続されたデスクトップブラウザで自動的にプリロードできるため、理にかなっていますが、多くのモバイルユーザーが帯域幅が限られており、ビデオをダウンロードするかどうかを選択します。

ポスター属性

ウェブ上でビデオを視聴しようとすると、通常、ビデオの単一のフレームが表示され、コンテンツの予告編が提供されます。ポスター属性により、このようなトレーラーを簡単に選択できます。このプロパティはSRCに似ており、URLを介してサーバー上の画像ファイルを指します。

以下は、ポスター属性を備えたビデオ要素です：

<video src="example.webm"></video>

ポスター属性が省略されている場合、デフォルトの「ポスター」がビデオの最初のフレームになり、ロード後すぐに表示されます。

Muted属性

Muted属性（ブールタイプ）は、ビデオ要素のオーディオトラックのデフォルトの状態を制御します。

<video height="280" src="example.webm" width="375"></video>

完全なブラウザのサポートを実現するには、ソース要素を宣言する方法を次に示します。

ソース要素（奇妙なことに）には、ビデオファイルの場所を指定するSRC属性があります。また、要求されたリソースのコンテナ形式を指定する型属性も受け入れます。この後続のプロパティにより、ブラウザは関連するファイルを再生できるかどうかを判断できるため、サポートされていない形式を不必要にダウンロードできません。

<video src="example.webm" width="375" height="280" controls></video>

<video src="example.webm"></video>

型属性の構文が、コンテナ値とコーデック値に合うようにわずかに変更されていることに気付くでしょう。値を中心に使用される二重引用符は単一の引用符に変更され、ネストされた二重引用符の別のセットがコーデックで特別に使用されています。

これは一見して少し混乱するかもしれませんが、ほとんどの場合、動画をエンコードする方法（この章で後で説明します）をエンコードする方法ができたら、値をコピーして貼り付けるだけです。指定されたファイルの正しい値を定義して、ブラウザがどのファイル（もしあれば）を再生できるかを確認できるようにすることが重要です。

注：どのような形式が必要ですか？

Webサイトのターゲットオーディエンスによっては、完全なブラウザサポートを取得するために3つのソース要素を必要としない場合があります。ビデオおよびオーディオコーデックとコンテナのサポートは素晴らしいです。1つまたは2つの組み合わせしか必要ないかもしれません。使用するフォーマットを決定するために、使用できますか？最新のブラウザサポート情報を確認してください。

ソース順序

3つのソース要素はビデオ要素の子要素として配置され、使用されるブラウザは認識するコンテナ/コーデック形式を選択します - 必要なリソースのみをダウンロードし、他のリソースを無視します。 3つのファイル形式を宣言した後、コードは次のようになりました。

<video height="280" src="example.webm" width="375"></video>

エレガントなダウングレードの原則を維持するために、ビデオ要素は、古いブラウザーが他の方法でビデオにアクセスできるように設計されています。ビデオ要素を認識しないブラウザは、単にそれとそのソースチャイルド要素を無視します。ただし、ビデオ要素にブラウザが有効なHTMLとして認識するコンテンツが含まれている場合、コンテンツを読み取り、表示します。

サポートされていないブラウザに何を提供できますか？ Adobeによると、10億人以上のデスクトップユーザーがシステムにFlash Playerプラグインをインストールしています。また、これらのフラッシュプラグインインスタンスのほとんどはバージョン9以下であり、MPEG-4ビデオコンテナ形式をサポートしています。これを念頭に置いて、Internet Explorer 8以前（およびHTML5ビデオをサポートしていない他の古いブラウザー）がビデオを再生できるようにするために、埋め込まれたフラッシュビデオをフォールバックとして宣言できます。これは、フラッシュフォールバックコードを含む

のビデオの完全なコードです：>

• オブジェクト要素の幅と高さの属性は、ビデオ要素の幅と同じでなければなりません。
• ファイルを再生するには、非営利目的のために無料のLongtail VideoのオープンソースJWプレーヤーを使用しますが、好きなビデオプレーヤーを使用できます。
• フラッシュビデオコードには独自のバックアップがあります - フラッシュビデオコードが機能しない場合、画像ファイルが表示されます。
• 4番目のPARAM要素は、使用するファイルを定義します（example.mp4）。前述のように、ほとんどのFlash PlayerインスタンスはMPEG-4コンテナ形式を使用してビデオの再生をサポートしているため、他のビデオ形式をエンコードする必要はありません。
HTML5ビデオをサポートするHTM5有効なブラウザは、仕様で指定されているソースタグではないビデオ要素のコンテンツを無視するため、すべてのブラウザでフォールバックは安全です。

HTML5ビデオおよびオーディオタグのFAQ

HTML5ビデオとオーディオタグとは何ですか？

HTML5ビデオおよびオーディオタグは、HTML5で導入された機能で、ビデオとオーディオ要素をHTMLコードに直接埋め込むことができます。これにより、外部プラグインまたはプレーヤーの必要性がなくなり、ユーザーにシームレスなマルチメディアエクスペリエンスを提供します。タグは、

タグと、オートプレイ、コントロール、ループ、ミュート、ソースなどのこれらの要素の動作を制御できるプロパティで構成されています。 <video></video> <audio></audio>なぜ「HTML5ビデオファイルが見つからない」エラーを取得するのですか？

"HTML5ビデオファイルが見つかりません"エラーは通常、ブラウザが

<video></video>私のHTML5ビデオにコメントを追加する方法は？

html5ビデオにコメントを追加するには、ビデオにテキスト、形状、またはその他の要素を追加するために、より多くの情報を提供したり、ビデオの特定の部分を強調したりすることが含まれます。 HTML5は組み込みの注釈機能を提供していませんが、JavaScriptとCSSを使用してカスタム注釈を作成できます。または、使いやすいビデオ注釈ツールを提供するVeed.ioなどのオンラインツールを使用できます。

「HTML5ビデオファイルが見つからない」エラーを解決する方法は？

「HTML5ビデオファイルが見つからない」エラーを解決します。エラーの原因を識別して解決します。ファイルパスが正しくない場合は、修正してください。ファイルが削除されている場合は、復元するか、新しいファイルに置き換えます。サーバーの問題がある場合は、サーバー管理者またはホスティングプロバイダーにお問い合わせください。場合によっては、ビデオファイルが破損する場合があります。その場合、ファイルを修理または交換する必要があります。

なぜ私のHTML5ビデオがFirefoxで再生できないのですか？

HTML5ビデオがFirefoxで再生されない場合、さまざまな理由が原因である可能性があります。 Firefoxは、タグのソース属性で指定されたビデオ形式をサポートできません。ブラウザは、セキュリティまたはプライバシー設定のためにビデオをブロックする場合があります。この問題を解決するには、ビデオ形式とブラウザの設定を確認してください。 <video></video>

破損したHTML5ビデオファイルの修復には、ビデオ修理ツールの使用が含まれます。これらのツールは、破損したファイルを分析し、ファイルが正しく再生されないようにするエラーや問題を修正しようとします。人気のあるビデオ修理ツールには、素晴らしいビデオ修理とWondershare Repairitが含まれます。

私のHTML5ビデオにコントロールを追加する方法は？

<video></video> HTML5ビデオを自動的に再生できますか？

はい、

<video></video>私のHTML5ビデオをループする方法は？

<video></video>HTML5ビデオで複数のソースを再生できますか？

はい、タグ内に複数の

タグを含めることができます。ブラウザは、再生できる最初のソースを使用します。これにより、最大限の互換性を得るために、さまざまなブラウザに複数のビデオ形式を提供できます。 <video></video>

以上がhtml5ビデオとオーディオ：マークアップ - シットポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。