HTML5ビデオとオーディオタグの詳細(xì)な説明：レスポンシブビデオプレーヤーの構(gòu)築

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

コアポイント

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

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

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

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

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

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

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

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

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

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

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

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

各ブラウザは、組み込みのビデオコントロールの外観を擔(dān)當(dāng)します。図5.1および図5.2は、ブラウザ全體のこれらのコントロールの外観の違いを示しています。

図5.2 firefox 図5.3インターネットエクスプローラー図5.4オペラのネイティブビデオコントロール

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

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

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

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

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

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

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

ループ屬性

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

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

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

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

PRELOADプロパティ

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

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

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

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

ポスター屬性

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

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

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

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

Muted屬性

Muted屬性（ブールタイプ）は、ビデオ要素のオーディオトラックのデフォルトの狀態(tài)を制御します。

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

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

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

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

複數(shù)のビデオ形式のサポートを追加

私たちが議論したように、現(xiàn)在、単一のコンテナ形式を使用してビデオを提供する方法はありませんが、これは実際にビデオ要素の背後にある哲學(xué)であり、近い將來に達(dá)成したいことです。複數(shù)のビデオ形式を含めるために、ビデオ要素を使用すると、ソース要素の定義が可能になり、各ブラウザが選択した形式でビデオを表示できるようにします。これらの要素は、ビデオ要素のSRC屬性と同じ機(jī)能を持っているため、ソース要素を提供する場合、ビデオ要素にSRCを指定する必要はありません。

完全なブラウザのサポートを?qū)g現(xiàn)するには、ソース要素を宣言する方法を次に示します。

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

また、

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

型屬性は、要求されたファイルのビデオとオーディオコーデックを定義するコーデックパラメーターを指定することもできます。以下は、指定されたコーデックのソース要素です。

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

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

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

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

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

ソース順序

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

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

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

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

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

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

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

html5 herald

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

この新しく追加されたコードがどのように機(jī)能するかを詳細(xì)に説明します（結(jié)局フラッシュに関する本ではありません?。─ⅳ长违骏挨巫芳婴摔膜い谱⒁猡工伽长趣い膜ⅳ辘蓼?。

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

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

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

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

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

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

および

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

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

タグのソースプロパティで指定されたビデオファイルを見つけたりアクセスできないときに発生します。これは、誤ったファイルパス、ファイル削除、サーバーの問題など、さまざまな理由によって引き起こされる可能性があります。ファイルパスが正しく、ビデオファイルがこのエラーを解決するためにアクセスできることを確認(rèn)してください。

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

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

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

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

なぜ私のHTML5ビデオがF(xiàn)irefoxで再生できないのですか？

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

破損したHTML5ビデオファイルを修正する方法は？

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

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

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

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

はい、

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

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

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

<video></video>HTML5ビデオで複數(shù)のソースを再生できますか？

はい、タグ內(nèi)に複數(shù)の

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

以上がhtml5ビデオとオーディオ：マークアップ - シットポイントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。