HTML5ビデオデザイナーが知っておくべき10のこと

HTML5革命は、世界中のあらゆる分野のエキサイティングなWebデザイナーです。新しい仕様は、セマンティックWebサイトを構築するための多数の要素と属性をサポートしています。これらの新機能には、オーディオおよびビデオフォーマット用のマルチメディアタグが含まれています。.

過去数年間に、FlashベースのメディアプレーヤーはWeb上でのストリーミングには十分すぎるほどであり、このテクノロジはレガシーブラウザをサポートするために依然として必要です。しかしありがたいことに現代の標準規格は進歩しており、HTML5ビデオを含めることは何十もの新しい機会への扉を開きます.

このガイドでは、Web用のHTML 5ビデオについて紹介します。ネイティブのブラウザ内プレーヤーとそのすべての機能を理解するには、いくらか練習が必要です。そして、親しむための最善の方法は、最初に頭の中でダイビングすることです。!

1.メディアの種類

フラッシュビデオプレーヤーを使用しているときは、すべてのビデオフォーマットを.flvで関連付けることは一般的です。これはうまくいきますが、ほとんどのflvファイルはより高度なファイルフォーマット/コーデックの近くではどこでも品質を保つことができません。 HTML5でサポートされている3つの重要なビデオタイプがあります：MP4、WebM、そしてOgg / Ogv。 MPEG-4ファイルタイプは、一般的にH.264でエンコードされているため、サードパーティのFlashプレーヤーでの再生が可能です。これは、代替方法をサポートするために.flvビデオコピーを保存する必要がないことを意味します。 WebMとOggは、HTML5ビデオに関連する2つの新しいファイルタイプです。 Oggは、オープンソースの標準オーディオファイルフォーマットに基づいたTheoraエンコーディングを使用しています。これらは、拡張子.oggまたは.ogvで保存できます。.

WebMはGoogleによって公開されているプロジェクトで、WebM ProjectのWebサイトで詳しく読むことができます。フォーマットは、Opera、Google Chrome、Firefox 4+、そして最近ではInternet Explorer 9ですでにサポートされています。それは、ほとんどのWeb専門家にはまだ知られていません。.

2.ブラウザのサポート

Webサイトに必要なファイルの種類はどれですか。理想的には、3つすべてが完全なサポートスペクトラムを提供するので、3つすべてが素晴らしいでしょう。しかし、これは現実的ではありません。実際、2つのベースですべてのベースをカバーできます。これは、各ブラウザで機能するものの内訳です。

Mozilla Firefox - WebM、Ogg
Google Chrome - WebM、Ogg
オペラ - WebM、オッグ
サファリ - MP4
Internet Explorer 9 - MP4
Internet Explorer 6-8 - HTML5なし、Flashのみ!

あなたが覚えているなら、先に私はほとんどのフラッシュビデオプレーヤーがH.264でエンコードされている限りMP4ファイルをサポートすると述べました。そういうものとして、これらのブラウザのそれぞれは最終手段としてMP4 + Flashを埋め込むでしょう。これはあなたが作成するだけでよいことを意味します二すべてのブラウザをサポートするためのさまざまなビデオフォーマット。 Safari / IE9ではMP4、それ以外ではWebMとOggのどちらかを選択.

私の意見では、WebMフォーマットに固執することを強くお勧めします。それはプロジェクトの背後にあるいくつかのビッグネーム（すなわちグーグル）を持っていて、HTML5コミュニティで多くの注目を集めています。 Ogg / Ogvはサポートされますが、WebMのファイルサイズが小さいと人気が失われる可能性があります。 Sean Golliherによって書かれたWebで、ビデオの将来に関する関連記事を読むことができます。.

3.簡単なHTML5ビデオの埋め込み

それでは、サンプルコードを埋め込むために必要な構文を見てみましょう。必要なのは、各ムービーURLを参照するためのHTML5ビデオタグだけです。.

に注意してください コントロール そして 自動再生 属性に値を設定する必要はありません。私も含まれて ポスター ストリーミングの前にビデオプレーヤーに画像をプリロードする属性。これは多くのWebプレーヤーで共通のプレビューです.

MP4とWebMの両方のフォーマットをvideo要素の内部に提供しています。どちらもロードできない場合は、ユーザーにブラウザを更新するためのエラーを表示します。.

4.フラッシュフォールバックの提供

上記の例は、すべての規格準拠のWebブラウザに最適です。それでも、私たちは世界が常に最先端技術ではないことを考慮する必要があります。 Safari、Mozilla Firefox、特にInternet Explorerの古いバージョンのユーザーをサポートする必要があります。.

これを達成するための最良の方法は、Flashフォールバックプレーヤーを使用することです。これらを使用して追加できます。 埋め込む または 物 サードパーティの.swfファイルを参照するためのタグ。 JW PlayerとFlowplayerは、2つの無料のオープンソースソリューションです。しかしActiveDenのプレミアムビデオプレーヤーもチェックしてください。.

それでは上のコードを微調整して、現存するほぼすべてのブラウザをサポートするための予備のFlashプレイヤーを含めましょう。.

5.モバイル機器のサポート

モバイル業界はまだ若いので、このトピックについてはまだかなり議論されています。 Appleは、MacおよびiOSデバイスでMP4をサポートするようになりました。つまり、標準のビデオUIを使用して、iPad、iPhone、またはiPod Touchで.mp4ビデオファイルをネイティブにストリーミングできます。これは市場シェアの多くをカバーしています.

最近のAndroidデバイスは、これと同じレベルのサポートにアクセスするのに苦労していました。しかし、Googleはついに.mp4 Webストリーミングを採用しました。これは現在、ほぼすべてのモバイルユーザーを利用しています。そしてFlashはここでは選択肢ではないので、MP4が利用可能な最善の解決策です。これが、iOSデバイスがすぐにファイルを認識できるように、.mp4コードを最初に埋め込む理由です。.

6. Safariユーザーエージェント

言及しなければならない1つのバグは、FlashプレーヤーとSafariでのネイティブHTML5 .mp4ストリーミングの間に存在するものです。ブラウザは両方のファイルをサポートできるため、Flashの代わりにHTML 5ビデオストリームを取得するのは困難です。しかし、TUAWに関するこの素晴らしいブログ投稿のおかげで、ブラウジングユーザーエージェントを変更するのは簡単です。.

これにより、Webページはブラウザを別のデバイスで実行されていると認識させます。ほとんどの場合、iPadを選択することになります。これは、Flashの再生をサポートしていません。これは、MP4のネイティブ再生方法とフラッシュ再生方法をテストするときに発生する可能性がある唯一の大きな問題です。.

7.プレーヤーコントロールを管理する

信じられないかもしれませんが、HTML 5ビデオプレーヤーコントロールを操作するために使用できる方法もあります。 JavaScriptでは、一連のopenメソッドから取得することですべて実行できます。ここにリストするにはあまりにも多くの方法がありますが、詳細についてはW3Cメディア要素のドキュメントを読み飛ばしてみてください.

あなたに一般的な考えを与えるために、Opera devブログは初心者にとって素晴らしいいくつかの短いチュートリアルを投稿しました。これまでJavaScriptやjQueryを使ったことがなかったとしても、これを実行するのは簡単です。次のようなビデオメディアの特定の属性を呼び出すことができます。 ミュート または 現在の時刻. その後、jQueryでDOMを操作することで、これらの基準に基づいてアクションを実行できます（背景を暗くし、広告を表示します）。.

Operaの記事と同じ開発者が、スクリプトビデオプレーヤーの実演デモを提供しています。あなた自身のUIコントロールをカスタマイズする機会は素晴らしいです。 HTML5ビデオがどれほどパワフルになってきているかを示すためだけのものです。.

8.ビデオフォーマット変換

これはもう一つの大きな問題で、技術に精通していない個人を混乱させる可能性があります。あなたはあなたのウェブサイトを立ち上げてストリーミングしたいだけで、今あなたはビデオを変換することに対処しなければなりませんか？実はそれほど難しいことではありません.

あなたの最大の優先事項であるMP4に対処するために、3つの主要なOSすべてで動作する無料のオープンソースソリューションであるHandBrakeを使うことができます。それは景品利用者にとってこれが最良の選択肢となるいくつかの他のコーデックと一緒にH.264をサポートするでしょう。あなたが払い戻すお金があるなら、私はたった40ドルの生涯ライセンスでMac App StoreにあるXilisoftコンバータを推薦しなければなりません.

それはWebMルートが人生をずっと楽にするように見えます。 Miro Video Converterは、素晴らしい品質のWebMファイルを作成するWindowsおよびOS X用の無料ツールです。それは同様にかなり素晴らしい品質で出てくるOgg Theoraエンコーディングをすることもできます.

9. Webプレーヤーを構築する

HTML5仕様のビデオフォーマットは、開発者にとってまだ新しいものです。カスタムコントロール、スライダー、再生/一時停止アイコンなどを可能にするために再生されるのを待っているだけのオープンプロトコルがあります。.

このコードは、高度なCSSターゲティングと、正式なjQueryを必要とするため、初心者にとっては少し複雑です。他にもカスタマイズ可能なプレイヤーデザインを提供できるフレームワークがあります。同様に、このスライドシェアプレゼンテーションはHTML5ビデオプレーヤーを構築するための素晴らしい入門書です。.

HTML5ビデオプレーヤーを構築する

10. VideoJSライブラリ

VideoJSは、おそらくHTML5ビデオプレーヤーに対する私のお気に入りのソリューションです。あなたが必要とするのはあなたの文書のどこかに含まれているそれらの自己ホストされたJavaScriptとCSSスタイルシートだけです。それから、標準のHTML5ビデオコードを、スキンを追加するためのいくつかの追加クラスとともに記述します。以下にサンプルコードを追加しました。

もしあなたがたまたまWordPressブログを運営しているなら、あなたは彼らのカスタムWPプラグインを試すこともできます。 HTML5ビデオを表示するページには、ライブラリjs / cssが自動的に含まれます。また、ショートコードを使用して、投稿エディタまたはページエディタ内からこれを実行できます（こちらを参照）。.

結論

この入門ガイドが、将来のWebビデオへの関心をかき立てることを願っています。より多くのユーザーがモバイルに目を向けると、HTML5標準がこれらのタイプのメディアに採用されることが重要です。開発者が完全にサポートされたソリューションをより早く作成できるように、Webをよりシンプルにする必要があります。 HTML5ビデオの将来についてのあなたの考えや提案を聞きたいです。あなたが共有したい場合は、下記の投稿ディスカッションエリアにコメントを残してください。.