デスクトップおよびモバイルデバイスにシームレスにビデオを配信

コンテンツ

• HTML5とは何ですか？
• HTML5ビデオとは何ですか？
• コンテナ
• MPEG-4
• Ogg
• WebM
• フラッシュビデオ
• コーデック：ビデオ
• H.264
• Theora
• VP8
• VP6
• コーデック：オーディオ
• AAC
• Vorbis
• MP3
• コンテナ/コーデックブラウザの互換性
• 改善されたHTML5マークアップ
• 潜在的な問題
• フラッシュビデオの統合
• フラッシュにフォールバック
• HTML5にフォールバック
• 次は何ですか？

HTML5の導入により、開発者は視聴者にビデオを配信するための新しいツールを入手しました。インターネット対応のパーソナルコンピュータの99％にインストールされているジャガーノートのFlash Playerと並んで、HTML5はビデオの世界で主要なプレーヤーになる準備ができています。

ただし、良くも悪くも、HTML5仕様は動画配信のすべての側面を厳密に定義しているわけではなく、そのような場合に発生する避けられないフォーマット戦争により、世界中の開発者やコンテンツ作成者の生活が少し難しくなっています。このマルチパートシリーズでは、これらの絶えず変化する海域をナビゲートする方法について説明します。この最初の記事では、HTML5をFlash Playerと組み合わせて使用​​して、可能な限り幅広い視聴者にリーチする方法と、この目標を達成するために必要なすべての形式でビデオアセットを作成する方法について説明します。

今後の記事では、エンコードソフトウェアオプションの概要を説明する方法、JavaScriptを使用して、ページにアクセスする可能性のある多くのユーザーブラウザー構成を評価して応答する方法、および最も人気のあるJavaScriptビデオプレーヤーのいくつかを紹介します。あなたのために重い物を持ち上げてください。

HTML5とは何ですか？

本当に最初に言わなければならないことは、HTML5は標準ではないということです。それはまだ流動的であり、それは早期採用者に大きな影響を与える可能性があります。 HTML5仕様のドラフトは、Apple、Mozilla Foundation、およびOperaSoftwareの個人によって設立された業界プレーヤーのコレクションであるWebHypertext Application Technology Working Group（WHATWG）によって2004年に開始されました。その後、Wide Web Consortium（W3C）は、2007年にワーキングドラフトとして採用しました。仕様のラストコール（仕様のピアおよびパブリックレビューをほぼ最終的な形で求める）は2011年5月に発行されましたが、主要な新機能はありません。予想通り、それは完全な機能でさえありません。専門家は、あなたが聞いている推測や作成時期にもよりますが、2014年から2022年のどこかまで、仕様がW3Cによって承認されることを期待していません。

おもしろ情報：W3Cは現在も仕様のモニカとしてHTML5を使用していますが、HTMLの進化の背後にある主要な力であると多くの人が考えているWHATWGは、将来の取り組みから数を減らしました。それは「HTML」に固執し、それを「生活水準」と呼ぶことを計画しています。

これはどういう意味ですか？この時点で、それは実際には、仕様が複数年のフェーズではありますが、最終段階を通過するときに、アーリーアダプターが変更に備える必要があることを意味します。今日、多くのHTML5機能が利用可能であり、ほとんどの専門家は、仕様が大幅に変更される可能性は低いことに同意しています。

問題は、これまでのところ、公式の比較的間もなく発表される標準についてのみ話していることです。その標準の実装は別の問題です。各ブラウザ、および各ブラウザのすべてのバージョンは、さまざまな程度で、さまざまな成功を収めてHTML5機能を実装しています。それは開発者にとって物事をより困難にします、そして私達はまだ始まったばかりです。基本的なHTML5ビデオ機能に関して、ブラウザとモバイルオペレーティングシステム（OS）の互換性の簡単なスナップショットを次に示します。

HTML5ビデオとは何ですか？

基本的に、HTML5ビデオは、JavaScriptドキュメントオブジェクトモデルへのいくつかのマークアップタグと追加です。最も単純な実装では、HTML5ビデオは次のようになります。

ビデオsrc = "vid.mp4" width = "320" height = "240"コントロール> / video>

ただし、マークアップをより適切に使用する前に、これは全体像のごく一部にすぎないことを認識する必要があります。マークアップよりも間違いなく重要な（そして確かにより複雑な）のは、コンテンツ自体のフォーマットです。フォーマットという用語はかなり自由に使用されますが、ほとんどの場合、ビデオおよびオーディオデータを圧縮および解凍するためのアルゴリズムだけでなく、このデータをまとまりのある使用可能な形式で配信するコンテナもまとめて表します。簡単に言えば、コンテナはビデオ、オーディオ、および関連コンテンツのラッパーです。

HTML5開発者が直面する最大の課題の1つは、現在のHTML5ドラフト仕様では、ブラウザがサポートする必要のある1つのビデオ形式を推奨していないことです。各ブラウザの背後にあるチームは、どのビデオ形式がタスクに最も適しているかを判断する必要があります。これにより、ビデオ機能の実装がばらばらになり、コンテンツ作成者が克服しなければならない重大なハードルが発生します。実際、最も広く使用されているすべてのブラウザーでHTML5ビデオ配信をサポートするには、開発者はビデオごとに3つの個別のファイルを作成するか、オンザフライでトランスコード（ある形式から別の形式に変換）するサーバーソリューションに依存する必要があります。

コンテナ

この記事では、HTML5およびFlash互換のコンテナーと、ほとんどの場合、その中のビデオとオーディオの部分に限定して説明します。ただし、これらのラッパーは、字幕、章情報、メタデータなどの追加機能や、これらすべてのデータ型の同期方法もサポートできます。場合によっては、コンテナは、デジタル著作権管理（DRM）、基本的な3Dレンダリングオプション、ハードウェアレンダリングサポートなどの追加オプションをサポートします。

HTML5やFlashでサポートされている主要なコンテナは4つあります。各形式の長所と短所は、主にそれらに含まれるビデオとオーディオの機能に依存します（これについては後で説明します）が、コンテナ固有の機能の中には、ここで言及する必要があるものもあります。

MPEG-4

MPEG-4（より正確にはMPEG-4、パート14）は、Moving Picture ExpertsGroupによって管理されている独自のコンテナです。おなじみのファイル拡張子を使用する .mp4 （ただし .m4v 時々使用されることもあります）、MPEG-4コンテナは間違いなく最も認識されています。そのルーツはAppleのQuickTimeコンテナ（通常は .mov 拡張機能）であり、現在、ビデオ再生用のデスクトップおよびモバイルデバイスで最も一般的な選択肢です。たとえば、iTunes Mac / Windows / iPhone / iPad / iTouchエコシステムで使用されるコンテナです。ただし、特許とライセンスの問題により、これはゆっくりと変化しており、HTML5イニシアチブはその変化を加速しています。コンテナとしてのMPEG-4は、デジタル著作権管理をサポートしているため注目に値します。これは、一部のコンテンツクリエーターにとって不可欠な機能であり、魅力的でもあります。 ハードウェアアクセラレーション （チップベース、または支援された、実行時のエンコーディングおよび/またはデコーディング）は、このフォーマットで広く利用できます。 Flash Playerは、HTML5仕様に含まれているだけでなく、MPEG-4コンテナもサポートしています。

Ogg

Oggは、Xiph.OrgFoundationによって管理されている無料のオープンコンテナ形式です。 Xiph.Org Foundationは、 .ogv ファイル拡張子、Oggビデオファイルを見るのは非常に一般的です .ogg 拡張。 OggはLinuxOSでネイティブであり、QuickTimeコンポーネントによってMacおよびWindowsオペレーティングシステムでサポートされています。 Windows OSは、Windows MediaPlayer拡張機能またはDirectShowフィルターを使用してOggコンテンツを表示することもできます。

WebM

Googleは最近、無料のオープンなビデオおよびオーディオコンテンツの手段としてWebMコンテナを導入しました。それは使用します .webm ファイル拡張子は、Matroskaコンテナに基づいています。

ハードウェアアクセラレーションはすでにWebMファイルで利用可能であり、AdobeはFlashPlayerの将来のバージョンがWebMコンテナをサポートすると発表しました。

フラッシュビデオ

Flash Videoコンテナは、2つのコンテナを使用します。 FLVは、2003年に導入されたバージョン7に戻るFlash Playerバージョンをサポートする古い独自のフォーマットです。FlashPlayerバージョン9アップデート3は、MPEG-4に基づくF4Vフォーマットのサポートを導入しました。 （前述のとおり、バージョン9アップデート3以降を使用する場合、有効なMPEG-4コンテナーはFlash Playerでサポートされます。）

Flash Playerは、互換性のあるビデオファイルを再生するためにファイル拡張子に依存しませんが、各コンテナに一般的に使用される拡張子は .flv そして .f4v、それぞれ。 （F4Vフォーマットには .f4p 保護されたビデオの拡張機能。）Flash Player 10.2以降は、Flashビデオのハードウェアアクセラレーションをサポートしています。

コンテナの主なタスクは、ビデオとオーディオのコンテンツをまとめることです。これらの資産を操作するのは コーデック.

コーデック：ビデオ

コーデックは、作成時にアセットをエンコードし、実行時に再生するためにアセットをデコードするために使用されるアルゴリズムです。 （コーデックという用語は、「コーダー」/「デコーダー」から派生したかばん語です。）ソフトウェアおよびハードウェアメーカー（ブラウザーやモバイルデバイスの背後にある企業など）は、HTML5やFlashVideoなどのテクノロジーでサポートするコンテナーとコーデックを決定する必要があります。品質、ファイルサイズ、帯域幅、および同様の問題などの要因はすべて、この決定に関与します。

そのような最大の要因の1つは、特許とライセンスコストの影響であり、無料でオープンなコーデックの推進が、現在Webビデオ開発者が直面しているビデオ形式の断片化の理由の多くです。多くのコーデックがありますが、この説明では、HTML5およびFlash配信用の4つの主要なコーデックに焦点を当てます。最初にビデオコーデックがあります：H.264、Theora、VP8、およびVP6。 H.264とVP6は制限付きの特許であり、ライセンス料がかかりますが、TheoraとVP8は無料で、特許に邪魔されないか、これらの特許を施行しないという義務の下で維持されます。

H.264

とも呼ばれます MPEG-4パート10 または高度なビデオコーディング（AVC）、H.264はMPEGによって開発され、2003年に標準になりました。これは、低品質に最適化された高品質のコーデックです。 そして 電話からブルーレイプレーヤーまで、高帯域幅/ CPUデバイス。その仕様には、次のような「プロファイル」が含まれています。 ベースライン に 高い、さまざまな程度の品質とオプション機能を指示します。また、単一のファイルで再生機能に基づいて品質を調整できるスケーラブルなプロファイルも含まれています。ソフトウェアとハ​​ードウェアアクセラレーションの両方でサポートされており、モバイルデバイスから、放送、DVD、および同様の環境での高解像度ビデオまで、あらゆるもので広く使用されています。 H.264はMPEG-4コンテナの一部であり、直接またはF4Vコンテナの一部としてFlashVideoでも広く使用されています。

Theora

Theoraは、無料のオープンビデオコーデックです。他のコンテインはTheoraをビデオコーデックとして使用できますが、ほとんどの場合、Ogg形式に関連付けられています。 On2 Technologiesは当初、VP3としてTheoraとなるものを開発しました。 Theoraは、On2がVP3をパブリックドメインにリリースした後、VP3から派生しました。 Xiph.OrgFoundationがコーデックを維持するようになりました。ライセンス契約が必要であり、ロイヤリティフリーでライセンスされている元のVP3特許以外の既知の特許によって妨げられることはありません。 TheoraはLinuxでネイティブであり、オープンソースのエンコーダー/デコーダーを介してMacおよびWindowsオペレーティングシステムでサポートされています。

VP8

同じくOn2Technologiesによって開発されたVP8は、H.264 Highプロファイルと同様の品質で知られていますが、H.264Baselineプロファイルと同様にデコードの複雑さが低くなっています。 GoogleはOn2からVP8を買収し、WebMコンテナのビデオコーデックになりました。 Googleは、関連する特許を行使しないという取り返しのつかない約束を提供し、VP8をロイヤリティフリーにし、H.264の魅力的な代替品にしました。通常、ソフトウェアのエンコードとデコードでサポートされていますが、ハードウェアアクセラレーションはすでに使用されており、成長しています。

VP6

VP6は、FLV Flash VideoFormatで最も一般的に使用されるコーデックです。これは、アルファチャネルのサポートなどの魅力的な機能も含む、適度に高品質のコーデックです。

この記事の印象的なランニングテーマに貢献するために、On2TechnologiesはVP6も開発しました。 Macromedia（そしてAdobe）にライセンス供与されているVP6は、特許とライセンスの問題によって制限されています。これと、再生にFlash Playerが必要であるという事実により、FLV Flash Video Formatは多くの開発者にとって魅力のない長期的なソリューションになりますが、特にアルファの使用に関しては、ケースバイケースのニーズに対応します。チャネル。

コーデック：オーディオ

ビデオと同様に、多くのオーディオコーデックがありますが、ここでは、HTML5およびFlashビデオアセットで最も一般的に使用されるAAC、Vorbis、およびMP3に焦点を当てます。

AAC

Advanced Audio Coding（AAC）は、MP3形式の後継候補として設計されました。 MP3よりも品質が高いことが知られていますが、ビットレートは同じです。任意のビットレートを使用してAACファイルをエンコードすることもできますが、MP3エンコードにはいくつかの所定のビットレートのいずれかが必要です。 AACは、MPEG-4コンテナで使用されるコーデックの1つであり、HTML5互換性のためにこのコンテナで最も一般的に使用されるオーディオコーデックです。この形式はデジタル著作権管理をサポートしていますが、特許やライセンスの問題に悩まされています。通常はソフトウェアでデコードされますが、ハードウェアデコードの実装もいくつか存在します。

Vorbis

Vorbisは最も一般的にOggコンテナに関連付けられていますが、MP4、WebM、およびその他の形式で使用できます。これは、FlashとHTML5で広く使用されており、特許に邪魔されていない唯一の無料のオープンコーデックです。実際、Vorbisの開発は、MP3形式のライセンス料が発表されたときに開始されました。 MP3やAACと同等またはそれ以上の音質で知られていますが、ファイルサイズが小さく、ゲーム業界で人気があります。この形式はLinuxとAndroidでネイティブであり、QuickTimeコンポーネントとDirectShowフィルター、および専用のソフトウェアプレーヤーを介してMacとWindowsのオペレーティングシステムでサポートされています。

MP3

あなたはMP3が何であるか知っていますよね？これは、ポータブルデジタルオーディオデバイスのほぼ標準であり、FLV FlashVideo形式でも使用されます。特許を取得しており、ライセンス料が必要であり、いくつかの事前に決定されたビットレートのいずれかでエンコードする必要があります。

コンテナ/コーデックブラウザの互換性

ご覧のとおり、HTML5およびFlashビデオで使用できるビデオコーデック、オーディオコーデック、およびコンテナの1段落の概要でさえ、ダイジェストに少しの時間と注意が必要です。それでも、ビデオアセットをできるだけ多くの視聴者に配信する場合はこの資料が重要であるため、十分な時間を費やしています。どうして？なぜなら、前に簡単に述べたように、主要なブラウザとモバイルオペレーティングシステムの中で、 普遍的にサポートされているフォーマットはありません.

つまり、開発者としての私たちの仕事の大部分がブラウザとオペレーティングシステム間の不整合に対処していた、1997年の忙しい時代にタイムマシンで戻ることになります。次の表は、ビデオ形式（コンテナ、ビデオコーデック、およびオーディオコーデック）と主要なデスクトップブラウザおよびモバイルオペレーティングシステムとの間の互換性のスナップショットです。

この表は、注目に値するいくつかのことを示しています。まず、空のセルはサポートがないことを示し、入力されたセルはビデオ形式のサポートが追加されたバージョンを示します。 （アスタリスクは、プラグインなどのサードパーティソフトウェアを通じてサポートが利用可能であることを示すために使用されます。）

次に、この記事の執筆時点ではChromeは3つのビデオ形式すべてをサポートしていましたが、将来変更される可能性があります。 †Googleは、バージョン11.0のリリースでChromeがH.264ビデオコーデックのサポートを終了すると発表しました。これは、前述のHTML5ランドスケープの変化の良い例ですが、決定は延期されたようです。

そして最後に、すべてのブラウザでサポートされている形式はありません。最新のブラウザを扱う場合、MPEG-4とWebMアセットの組み合わせですべてのHTML5ユーザーにリーチすることが可能です。ただし、（一例として）ユーザーがFirefoxのバージョン3.6を使用している場合は、Oggビデオのみが問題になります。

さらに、ユーザーが好みのブラウザのHTML5互換バージョンにアップグレードしていない場合は、ビデオの再生にFlashPlayerを使用することがそのユーザーにとって最善の解決策である可能性があります。その結果、可能な限り幅広い視聴者にリーチするために、各ビデオの3つ以上のバージョンが作成されます。

しかし、楽しみはそれだけではありません。 GoogleによるH.264サポートの廃止、バグ、特異性、すべてのプラットフォームでの同等性の欠如など、ポリシーの決定を超えて、単一のブラウザまたはオペレーティングシステムでさえ常に同じ方法でビデオを処理するとは限りません。これらの問題のいくつかについては、この記事の後半で説明しますが、簡単に言うと、複数のプラットフォームにビデオを正常に配信するには、いくつかの計画と回避策が必要です。これにより、この記事の前半で簡単に紹介したHTML5マークアップの改良版を見ることができます。 HTML5ビデオソース>タグをミックスに導入し、既知の潜在的な問題に注意を払うことで、ほとんどの癖を効果的に処理できます。

改善されたHTML5マークアップ

説明したHTML5ビデオマークアップの最初のバージョンは次のようになりました。

ビデオsrc = "vid.mp4" width = "320" height = "240"コントロール> / video>

ここでの重要な問題は、ビデオソースがvideo>タグのsrc属性を使用して識別されることです。これにより、video>要素のソースは1つだけ許可されます。 1つのビデオ形式が普遍的にサポートされていないため、このアプローチはお勧めしません。

ただし、src属性を省略し、代わりに以下に示すようにHTML5 source>タグを追加すると、ブラウザは最初のソースから起動し、サポートされていない場合は次のソースに移動します。

video width = "320" height = "240" Poster = "vid.png"コントロール> source src = "vid.webm" type = ’video / webm; codecs = "vp8、vorbis" ’> source src = "vid.mp4" type =’ video / mp4; codecs = "avc1.42E01E、mp4a.40.2" ’> source src = "vid.ogv" type =’ video / ogg; codecs = "theora、vorbis" ’> / video>

マークアップのこの2番目のバージョンは非常に単純です。まず、320 x 240ピクセルのサイズのHTML5ビデオ要素を定義し、オプションのポスター属性を追加して、ビデオが再生されるまで（または、一部のブラウザーでは、ビデオがロードされるまで）静止画像を表示し、によって提供されるネイティブ再生コントロールを表示します。ブラウザ。後者の属性を省略すると、コントロールは表示されないため、開発者はJavaScriptを使用して独自のカスタムコントロールを作成できます。このシリーズの次回の記事では、そのプロセスを見ていきます。

ビデオ要素の追加の属性は次のとおりです。

• プリロード：ビデオアセットのどれだけをプリロードする必要があるかを示します。オプションが含まれます 無し, メタデータ （寸法、期間、最初のフレームなどをフェッチするため）、および 自動 （ブラウザが実用的な限り多くのアセットをプリロードできるようにするため）
• 自動再生：ロード直後にビデオを再生するかどうかを決定するブール値
• オーディオ：初期オーディオ状態を指示します（現在、のみ ミュート サポートされています）
• ループ：全期間再生した後、ビデオが最初に戻って再生を再開するかどうかを決定するブール値

サンプルマークアップの最初のソースタグは、WebMビデオファイルを識別します。それがサポートされていない場合は、MPEG-4ファイルが使用されます。また、MPEG-4に互換性がない場合は、Oggビデオファイルが使用されます。すべての場合において、type属性は、再生に必要なコンテナーのタイプとコーデックを示します。

潜在的な問題

オーディエンスをターゲットにするときにどれだけ包括的になりたいかによって、いくつかの既知の問題が発生する可能性があります。幸いなことに、彼らの解決策は非常に単純です。

• 何よりもまず、使用する各ビデオ形式の再生に必要なmimeタイプがサーバーでサポートされていることを確認してください。これを実現する簡単な方法の1つは、 .htaccess HTMLファイルと同じディレクトリにファイルを置き、AddTypeディレクティブを使用して必要なmimeタイプを追加します。

AddType video / ogg .ogv AddType video / mp4 .mp4 AddType video / webm .webm

• iOS3.xはposter属性が好きではありません。ビデオから省略>タグ
• iPad iOS 3.xでは、mp4ソース>が最初にリストされていない限り、ビデオは再生されません
• Android2.3はtype属性が好きではありません。 MP4ソースタグから省略します（Androidが現在サポートしている唯一のコンテナー）

したがって、HTML5配信に関する既知の問題を回避し、iOSとAndroidの古いバージョンに到達するには、進化したHTML5マークアップのこの4番目のバージョンを使用します。ビデオ要素のposter属性が削除され、MP4ソースが最初にリストされ、後者のtype属性が削除されていることに注意してください。

video width = "320" height = "240"コントロール> source src = "vid.mp4"> source src = "vid.webm" type = ’video / webm; codecs = "vp8、vorbis" ’> source src = "vid.ogv" type =’ video / ogg; codecs = "theora、vorbis" ’> / video>

可能な限り幅広いHMTL5オーディエンスにリーチするために必要な作業は完了しましたが、HTML5と互換性のないブラウザーについてはどうすればよいでしょうか。

フラッシュビデオの統合

横行する宣伝にもかかわらず、Flash Playerは依然として印象的な力であり、依然として広く使用されています。多くの場合、目的の機能をサポートするためにFlashPlayerのビデオ配信を希望または要求する場合があります。この記事の次回の記事では、これらの機能のいくつかを箇条書きにします。ただし、はるかに重要なのは、HMTL5ビデオが 非常に多くのユーザーに対しても機能しません。 FlashPlayerが享受している種類の浸透に到達するには新しすぎます。

一瞥 NetMarketShareのデスクトップブラウザのバージョン統計は、 現在使用されているブラウザの50％はHMTL5と互換性がありません。これは、より多くのユーザーがブラウザをアップグレードするにつれて変化し続け、モバイル市場はHTML5ビデオ配信をますます不可欠にするでしょう。ただし、今日では、Flash Playerを無視することは、必然的にコンテンツの視聴者がはるかに少なくなることを意味します。

幸い、HTML5からのフォールバックとして、または必要に応じてHTML5に戻す最初の選択肢として、必要に応じてFlashコンテンツを配信するようにページをコーディングできます。

フラッシュにフォールバック

HTML5とFlashPlayerの両方を使用してビデオを配信する最も簡単なアプローチは、ブラウザーがHTMLを解析する方法を利用することです。 video>タグとsource>タグを使用すると、HTML5互換のブラウザは、互換性のあるビデオ形式が見つかるまで、提供されたソースをウォークスルーすることを思い出してください。ブラウザがHTML5video>要素をサポートしていない場合、これらのタグは無視されるため、このプロセスはある意味で継続すると考えることができます。

したがって、包括的なHTML5ソースリストの最後にFlashビデオプレーヤーオブジェクトを配置すると、HTML5互換のブラウザーは最終的にビデオの再生に必要なアセットを見つけ、他のすべてのブラウザーはFlashPlayerを使用してビデオを再生します。 （もちろん、Flash Playerがインストールされていることを前提としていますが、これについては後で説明します。）このアプローチは、KrocCamenのVideofor Everybodyテクニックによって普及し、JavaScriptや複雑なコーディングを必要としないため魅力的です。

これは、この記事全体で使用されているHTML5マークアップの最後の例です。この非常に単純な例では、Adobeが開発したオープンソースメディアフレームワークストロボプレーヤーを使用して、Flashビデオプレーヤーとして機能します。

video width = "320" height = "240"コントロール> source src = "vid.mp4"> source src = "vid.webm" type = ’video / webm; codecs = "vp8、vorbis" ’> source src = "vid.ogv" type =’ video / ogg; codecs = "theora、vorbis" '> object width = "320" height = "240"> param name = "movie" value = "StrobeMediaPlayback.swf"> param name = "flashvars" value = "src = http：// yourdomain.com/vid.mp4 "> param name =" allowFullScreen "value =" true "> / object> / video>

これですべてです。ご覧のとおり、HTML5マークアップは、ここで説明する既知の問題の簡単なリストを説明し、HTML5ビデオがサポートされていない場合はFlashPlayerにフォールバックします。

HTML5にフォールバック

Flash Playerでレンダリングされたビデオから始めて、HTML5にフォールバックする場合（特定の機能を提供したい場合、または可能な場合はより一貫性のあるプレーヤーコントロールが必要な場合）、JavaScriptを使用してこのタスクを実行できます。

この簡単な例では、SWFObjectJavaScriptライブラリを使用して難しい作業を行います。 Flash Playerが存在するかどうかを検出するだけでなく、必要な最小バージョンも使用されているかどうかも検出できます。互換性のあるバージョンのFlashPlayerが見つかった場合、SWFObjectは、指定されたdiv>のコンテンツをFlashPlayerを埋め込むために必要なHTMLに置き換えます。そうでない場合、アクションは実行されず、div>内のHTML5コードはその仕事をするために残されます。

script type = "text / javascript" src = "swfobject.js"> / script> script type = "text / javascript"> var flashvars = {}; var params = {}; var属性= {}; flashvars.src = "http://yourdomain.com/vid.mp4"; swfobject.embedSWF（ "StrobeMediaPlayback.swf"、 "flashcontent"、 "320"、 "240"、 "10.0.0"、false、flashvars、params、attributes）; / script> body> div id = "flashcontent"> video width = "320" height = "240"コントロール> source src = "vid.mp4"> source src = "vid.webm" type = ’video / webm; codecs = "vp8、vorbis" ’> source src = "vid.ogv" type =’ video / ogg; codecs = "theora、vorbis" ’> / video> / div> / body>

おそらく、このアプローチの最大の利点は、div>のコンテンツを使用して、特定のタスクに本当に適している場合にユーザーがFlashPlayerを取得することをエレガントに提案できることです。実際、SWFObjectは、必要に応じて、このプロセスを自動化するFlashPlayerのエクスプレスインストールオプションをサポートしています。

次は何ですか？

この記事が、ビデオアセットを可能な限り幅広い視聴者に配信する方法と、タスク用にアセットを最適化するために必要な技術的背景の両方を理解するために必要な基礎を提供したことを願っています。次回の記事では、次のことについて説明することで、これらの基礎を機能させます。

• ビデオファイルを作成するためのエンコーディングソフトウェアパッケージを選択します。
• Flash Playerが仕事に最適なツールである場合や、HTML5が好まれる場合の例。
• カスタムプレーヤーソリューションを必要とする状況のサンプルJavaScriptコード。
• そして、このすべての作業を処理するのに最適なJavaScriptライブラリのいくつかの概要。

またね！