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

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

この記事は、Alexis Goldstein、Louis Lazaris、Estelle Weylが共著した本「HTML5＆CSS3 for the Real World、第2版」から抜粋しています。この本は世界中の主要な書店で入手できます。また、ここで電子書籍バージョンを購入することもできます。

コアポイント

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

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

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

前のセクションで述べたように、これは限られたブラウザーでのみ動作します。ただし、これはHTML5ビデオをある程度機能させるための最小のコードです。理想的な世界では、IMG要素のようにどこでも機能するはずですが、しばらく時間がかかります。

IMG要素と同様に、ビデオ要素には幅と高さの属性を含めることができます：

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

サイズはマーカーに設定できますが、これはビデオのアスペクト比には影響しません。たとえば、前の例のビデオが実際に375×240で、マーキングが表示されている場合、ビデオは指定された280ピクセルスペース内に垂直に中心になります。これにより、ビデオが過剰に伸びて歪んでいるように見えません。

幅と高さの属性は整数のみを受け入れ、その値は常にピクセルです。もちろん、これらの値はスクリプトまたはCSSによって上書きすることができます。

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

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

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

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

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

図5.1

図5.2 firefox

図5.3インターネットエクスプローラー

図5.4オペラのネイティブビデオコントロール

autoplay属性

このプロパティは、ほとんどの場合に適切であるため、このプロパティを無視したいと考えています。 Boolean Autoplay属性は、その名前の意味と完全に一致します。これは、できるだけ早くビデオを再生するようにWebページに指示します。

これは悪い習慣です。私たちのほとんどは、特にスピーカーが悩まされているときに、ウェブサイトがビデオやオーディオを再生し始めた場合にどうなるかを知っています。ユーザビリティのベストプラクティスは、ユーザーが要求した場合にのみトリガーされる必要があることを規定しています。しかし、それは自動再生属性を決して使用しないという意味ではありません。

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

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

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

多くの（すべてではないにしても）モバイルブラウザはAutoplay属性を無視しているため、ユーザーが再生ボタンを押した後、ビデオは常に再生を開始します。これは、モバイル帯域幅が通常限られており、高価であることを考えると合理的です。

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

ループ属性

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

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

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

もちろん、オートプレイのように、ループも便利です。たとえば、ブラウザベースのゲームでは、ページが開かれたときにアンビエントサウンドと音楽を継続的に再生する必要があります。

PRELOADプロパティ

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

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

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

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

ポスター属性

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

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

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

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

Muted属性

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

このプロパティを追加すると、ビデオのオーディオトラックがデフォルトでミュートされ、ユーザーの設定が上書きされる場合があります。これは、要素のデフォルトの状態のみを制御します。これは、コントロールまたはJavaScriptと対話するユーザーによって変更される可能性があります。

ビデオ要素に追加します：

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

以前のバージョンのHTML5仕様には、値を削減したオーディオという名前のプロパティがありました。新しいミュートプロパティは、現在時代遅れのオーディオプロパティに取って代わります。

複数のビデオ形式のサポートを追加

私たちが議論したように、現在、単一のコンテナ形式を使用してビデオを提供する方法はありませんが、これは実際にビデオ要素の背後にある哲学であり、近い将来に達成したいことです。複数のビデオ形式を含めるために、ビデオ要素を使用すると、ソース要素の定義が可能になり、各ブラウザが選択した形式でビデオを表示できるようにします。これらの要素は、ビデオ要素のSRC属性と同じ機能を持っているため、ソース要素を提供する場合、ビデオ要素にSRCを指定する必要はありません。

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

ソース要素（奇妙なことに）には、ビデオファイルの場所を指定する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>

私たちのコードには、ビデオ要素にSRC属性がないことがわかります。前述のように、冗長性に加えてそれを含めると、ソース要素で定義されたビデオファイルも上書きされるため、この場合は省略する必要があります。

HTML5ビデオをサポートしていないブラウザの場合はどうすればよいですか？

ビデオ要素に含まれる3つのソース要素は、すべての最新のブラウザをカバーしますが、ビデオが古いブラウザで再生されることをまだ保証していません。前述のように、HTML5ビデオをサポートしていないブラウザを使用して、かなりの数のユーザーがいる場合があります。これらのユーザーのほとんどは、Internet Explorer 9の前に特定のバージョンを使用しています。

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

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

html5 herald

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

この新しく追加されたコードがどのように機能するかを詳細に説明します（結局フラッシュに関する本ではありません！）が、このタグの追加について注意すべきことがいくつかあります。

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

フラッシュフォールバックコンテンツに加えて、ユーザーがビデオのローカルコピーにアクセスして無料のときに視聴できるオプションのダウンロードビデオリンクを提供することもできます。これにより、誰もビデオを視聴できないことが保証されます。

ここで言及する最後のポイントは、追加のソース要素と同様に、あなたのウェブサイトがサポートされていないHTML5ビデオブラウザーからの訪問者を持たないかもしれないか、古いブラウザを使用して少数のユーザーを気にしないかもしれないということです。どちらの場合も、フラッシュフォールバックコンテンツを簡単に省略して、コードを簡素化できます。

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ビデオファイルを修正する方法は？

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

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

タグにコントロール属性を含めることにより、HTML5ビデオのコントロールを追加できます。このプロパティは、再生/一時停止、ボリューム、フルスクリーンボタンなど、ビデオにデフォルトコントロールのセットを追加します。ユーザーがビデオの上に浮かぶと、コントロールが表示されます。

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

はい、

タグにAutoPlay属性を含めることにより、HTML5ビデオを自動的に再生できます。ただし、多くのブラウザがユーザーとの干渉を防ぐために、サウンドでビデオを自動的に再生することを忘れないでください。動画が自動的に再生されるようにするには、ミュートされたプロパティでミュートされたことを検討してください。

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

タグにループ属性を含めることにより、HTML5ビデオをループすることができます。このプロパティにより、動画は再生後に最初から最初からやり直し、連続ループを作成します。

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

はい、タグ内に複数の

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

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