HTML5ビデオタグを使用すると、Webページにビデオを簡単に追加できます。しかし、表面上は簡単に見えますが、ビデオを起動して実行するためには、多くのことを行う必要があります。このチュートリアルでは、最新のすべてのブラウザで動画を表示するHTML5でページを作成する手順について説明します。
- 独自のHTML5動画のホスティングとYouTubeの使用
- Web上のビデオサポートの概要
- あなたのビデオを作成して編集する
- Firefox用のビデオをOggに変換する
- ビデオをMP4に変換してSafari用に
- Internet Explorer用のビデオをFLVに変換する
- Webページにビデオ要素を追加する
- JavaScriptとFlash Playerを追加してInternet Explorerを動作させる
- できるだけ多くのブラウザでテスト
独自のHTML 5ビデオのホスティングとYouTubeの使用
YouTubeは素晴らしいサイトです。ビデオをWebページに素早く埋め込むことが容易になりますが、若干の例外はありますが、それらのビデオを実行するには非常にシームレスです。 YouTubeに動画を投稿すると、誰もがそれを見ることができると確信することができます。
しかし、あなたの動画を埋め込むためにYouTubeを使用するにはいくつかの欠点があります
YouTubeの問題のほとんどは、デザイナー側ではなく消費者側の問題です。
- 遅い検索と索引付け
- サーバーの停止
- コンテンツは（一見）任意に削除されています
- 余りにも悪い内容
しかし、コンテンツ開発者にとってYouTubeが悪い理由はいくつかあります：
- 動画の最大長は10分（無料アカウントの場合）
- アップロードのパフォーマンスが悪い
- YouTubeはあなたのビデオに無制限の使用権を与えます
- すべてのYouTubeユーザーはあなたのビデオに無制限の使用権を得ます
HTML5ビデオはYouTubeよりもいくつかの利点があります
HTML5 for videoを使用すると、動画のあらゆる側面、視聴者、再生時間、コンテンツの内容、ホストされている場所、サーバーのパフォーマンスなどを制御できます。また、HTML5ビデオでは、最大数の人が見ることができるように、必要なフォーマットでビデオをエンコードする機会が与えられます。あなたの顧客は、プラグインを必要とせず、YouTubeが新しいバージョンをリリースするまで待つ必要があります。
もちろん、HTML5ビデオにはいくつかの欠点があります
これらには、
- 少なくとも3つの異なるコーデックでビデオをエンコードする必要があります
- HTML5をサポートしていないブラウザでも動作するようにするには、JavaScriptをいくつか含める必要があります
- あなたのサーバーは、ビデオをホスティングするための帯域幅要件を処理できる必要があります
続きを読む
02の10Web上のビデオサポートの概要
Webページにビデオを追加することは、長いこと困難なプロセスでした。間違っていることがたくさんあった：
- まず、 タグを使用してページに動画を埋め込みます。 しかし そのタグは別のタグのために推奨されなくなりました。とにかくブラウザをサポートしていないブラウザもありました。
- だからあなたは 古いブラウザはそれをサポートしておらず、新しいブラウザはそのサポートには不十分です。
- 次に、あなたはFlashを考えています！また、ビデオをFLVファイルとしてエンコードします。しかし、Flashは多くの携帯機器でサポートされておらず、多くの人々がFlashの使用方法にかかわらずFlashを嫌っています（私の世論調査では、Flashについての感想をどのように感じるかについて25％
- YouTubeなどの動画埋め込みサイトに動画をアップロードすることに決めましたが、YouTubeで議論した問題があります。
- 最後に、HTML5を使用することに決めましたが、Internet Explorerはそれをサポートしていません（Internet Explorer 9まではサポートしていません）。また、サポートしているビデオコーデック標準は2つあり、両方を使用できるブラウザは1つだけです。ビデオコーデックとコンテナのブラウザサポート
だからあなたは何をするつもりですか？ビデオの提供はますます重要になってきているため、ほとんどのサイトではオプションになりません。そして、多くのサイトが正常にビデオに切り替えました。
この記事の次のページでは、Firefox 3.5、Opera 10.5、Chrome 3.0、Safari 3および4、iPhoneおよびAndroid、Flash、Internet Explorer 7および8で動作するWebページにビデオを追加する方法について説明します。必要に応じて他の古いブラウザのサポートを追加するために必要なキーもあります。
続きを読む
03/10あなたのビデオを作成して編集する
Webページにビデオを置くときに必要なのは、実際のビデオです。継続的に撮影し、後で編集して機能を作成したり、スクリプトを作成して事前に計画したりすることができます。どちらの方法でもうまくいきます。あなたが快適であれば、それだけです。どのタイプのビデオを作成するのか分からない場合は、デスクトップビデオガイドで次のアイデアをチェックしてください。
- ファミリービデオプロジェクト
- マーケティングおよびプロモーションビデオ
- ビデオバーチャルツアー
- どのようにビデオへ
- 結婚式のビデオ
高品質ビデオを記録する方法を学ぶ
屋内と屋外での録音方法と、オーディオの録音方法を理解していることを確認してください。照明も非常に重要です。明るすぎるショットは目を傷つけ、暗すぎるだけは泥だらけで、プロフェッショナルではありません。サイトに30秒間の動画しか持たない場合でも、品質は高くなるほどウェブサイトに反映されます。
あなたのビデオで使用したいと思うかもしれないどんな音や音楽にも著作権が適用されることを忘れないでください。あなたが曲を書くことができる友達にアクセスできない場合は、ロイヤリティフリーの音楽をバックグラウンドで再生する必要があります。あなたのビデオに追加することができる場所もあります。
あなたのビデオを編集する
どの編集ソフトウェアを使用しても問題ありません。使い慣れていて、効果的に使用できる限りです。デスクトップビデオガイドのGretchenには、プロフェッショナルなビデオ編集のヒントがあり、ビデオを編集して見栄えを良くするのに役立ちます。
あなたのビデオをMOVまたはAVI（またはMPG、CD、DV）に保存する
このチュートリアルの残りの部分では、AVIやMOVのような高品質（非圧縮）の形式でビデオを保存すると仮定します。これらのファイルはそのまま使用できますが、すでに説明したビデオのすべての問題にぶつかります。次のページでは、ファイルを3つのタイプに変換して、最大数のブラウザで表示する方法について説明します。
04/10Firefox用のビデオをOggに変換する
最初に変換するフォーマットはOgg（時々Ogg-Theoraと呼ばれます）です。この形式は、Firefox 3.5、Opera 10.5、およびChrome 3がすべて表示できる形式です。
残念ながら、Oggはブラウザをサポートしていますが、購入できる有名なビデオプログラム（Adobe Media Encoder、QuickTimeなど）の多くは、Ogg変換オプションを提供していません。あなたのビデオをOggに変換する唯一の方法は、Web上で変換プログラムを見つけることです。
変換オプション
Media-Convertと呼ばれるオンラインツールがあり、さまざまな形式のビデオ（およびオーディオ）を他のビデオ（およびオーディオ）形式に変換すると主張しています。 3秒間のテストビデオで試してみましたが、私のMacで動作させることができませんでした。しかし、あなたは運が良いかもしれません。このサイトは無料であるという利点があります。
他にも次のツールがあります。
- Miro Video Converter（Windows Macintosh） - このプログラムは、OggとMP4（H.264）の両方に変換できるというメリットがあり、オープンソースです。
- Koyoteビデオコンバータ（Windows）
- 無料のビデオコンバータ私たちはこれにはWindowsとMacintoshの両方のバージョンがあると思っていますが、彼らのサイト
- シンプルなTheora Encoder（Macintosh） - これは私たちが使用する傾向のあるものです。
動画をOgg形式で保存したら、ウェブサイトのある場所に保存し、次のページに移動して他のブラウザの他の形式に変換します。
続きを読む
05の10ビデオをMP4に変換してSafari用に
あなたのビデオを変換する必要がある次のフォーマットは、Safari 3と4、そしてiPhoneとAndroidで再生できるように、MP4（H.264ビデオ）です。さらに、H.264ビデオはFlashで視聴するためにFLVファイルに簡単に変換できます。
このフォーマットは、市販の製品でより簡単に利用できます。ビデオエディタをお持ちの場合は、既にMP4に変換するプログラムがあります。 Adobe Premiereをお持ちの場合は、Adobe Video Encoderを使用することも、QuickTime Proを使用することもできます。前のページで説明したコンバーターの多くは、ビデオをMP4に変換します。
- MediaConvert - オンラインのAWSツール。
- Miro Video Converter（Windows Macintosh） - このプログラムは、OggとMP4（H.264）の両方に変換できるというメリットがあり、オープンソースです。
- SUPER（Windows） - さまざまなファイルタイプをMP4およびFLVに変換します。
- 無料のビデオコンバーター私たちは、これにはWindowsとMacintoshの両方のバージョンがあると思っていますが、彼らのサイトからは分かりませんでした。
あなたのMP4ファイルをあなたのウェブサイトに保存すれば、それをFlashに変換してInternet Explorerで使用する必要があります。
06の10Internet Explorer用のビデオをFLVに変換する
ビデオをFLVに変換する最も簡単な方法は、Flash自体を使用することです。それが私のビデオをFlashに変換する方法です。しかし、Flashをお持ちでない場合、ファイルをFLVに変換するための2つの一般的なツールがあります：
- SUPER（Windows） - さまざまなファイルタイプをMP4およびFLVに変換します。
- ffmpegX（Macintosh） - さまざまなファイルタイプをMp4およびFLVに変換します。
あなたのFLVファイルをあなたのウェブサイトに保存すると、次のページにあなたのビデオを再生できるようにHTMLを書き込む方法が示されます。
続きを読む
07/10Webページにビデオ要素を追加する
HTML5を使用してWebページにビデオを追加するのはとても簡単です。最新のブラウザのほとんどは、HTML 5ビデオをサポートしていますが、すべて同じ方法でサポートしているわけではありません。しかし、これは、あなたのビデオをOgg形式とMP4形式の両方で保存すると、最新のブラウザ（Internet Explorer 8を除く）に表示されるように、わずか4〜5行のHTMLを書くことができるということです。方法は次のとおりです。
ブラウザがHTML 5を期待するように、HTML 5 doctypeマーカーを記述します。
- 通常作成するWebページを作成します。
- 体の中には、
- ビデオの属性を決定する：コントロールとプリロードを使用することをお勧めします。あなたのビデオが良い最初のシーンを持っていない場合、ポスターオプションを使用してください。
- 自動再生 - ダウンロードするとすぐに開始する
- コントロール - 読者がビデオをコントロールできるようにする（一時停止、巻き戻し、早送り）
- ループ - 終了時に最初からビデオを開始する
- プリロード - 顧客がクリックしたときに速くなるようにビデオをプレダウンロードする
- ポスター - ビデオが停止したときに使用する画像を定義する
- 次に、ビデオの2つのバージョン（MP4とOGG）のソースファイルを
- Chrome 1、Firefox 3.5、Opera 10、および/またはSafari 4でページを開き、正しく表示されることを確認します。彼らはそれぞれ異なるコーデックを使用するので、少なくともFirefox 3.5とSafari 4でテストする必要があります。
それでおしまい。このコードを入手すると、Firefox 3.5、Safari 4、Opera 10、およびChrome 1で動作するビデオが作成されます。ただし、Internet Explorerはどうですか？
Internet ExplorerはHTML 5や
次のセクションでは、IE 5にHTML 5ビデオタグをうまく使用させてビデオを表示させるためにできることについて説明します。 Flashを使用する必要があります。良いニュースは、IE 9がHTML 5とビデオタグをサポートすると予想されることです。
08の10JavaScriptとFlash Playerを追加してInternet Explorerを動作させる
前のページのHTMLでは、FLVファイルのソース行が存在しないことに気づいたかもしれません。また、Internet Explorerでそのページをテストした場合、動作しません。 Internet ExplorerはHTML 5を認識せず、OGGまたはMP4ビデオをネイティブで再生することができないためです。 Internet Explorer 7と8を動作させるには、Flashでビデオを再生する必要があります。しかし、FLVファイルを追加するだけでは動作させるより多くのステップがあります。
ステップ1：あなたのウェブサイト用のFlashビデオプレーヤーを入手する
FlowPlayerは、WebサーバーにインストールしてFlashビデオを再生するときにいつでも使用できるオープンソースのFlashビデオプレーヤーであるため、FlowPlayerを入手することをおすすめします。 FlowPlayerの無料版では動画に広告が挿入されますが、必要に応じて商用ライセンスを購入することもできます。
FlowPlayerサイトの指示に従って、WebサイトにFlowPlayerをインストールします。簡単に言えば、2つのSWFファイルとJavaScriptファイルをサイトにインストールします。あなたのHTMLの一番下に（ タグ）を追加します：
しかし、Internet Explorerはまだビデオを再生しません、あなたはHTML 5タグを認識する方法を教えなければなりません。
ステップ2：Internet ExplorerにHTML 5タグの読み取りを促す
Google CodeにはHTML5要素を認識するのに役立つHTML Shivという便利なスクリプトがあります。だから
それを参照したいHTML文書の他のブラウザが混乱しないように、IEの条件付きコメントにそれを囲むことが最善です：
さて、IEは
