FLASHを使わずにビデオ再生させるには
最終更新日 2021-01-09 5:04
ブログやサイトに動画を表示させるには、一般的にはYouTubeにアップロードして、タグを貼ってFlashで再生させるのが一般的ですが、HTML5からFlashプレーヤーを埋め込まずに再生させることが出来るようになりました。
iPhoneのブラウザSafariは、HTML5に対応しているので今回は、iPhoneでも再生できるページにビデオを埋め込むタグを紹介します。
まずは、下の例を見てください。
Sponsored Link
| 動画名 | 解像度 | 映像ビットレート |
| m2t_5.mp4 | 1280×720 | 14000kbps |
| VIDEOタグを使用した場合 | ||
| ||
| YouTube | 1920×1080 | 5000kbps前後 |
| YouTubeとFlashを利用した場合 | ||
| ||
上の映像は、当サイトのサーバー上に動画をアップロードして、VIDEOタグで記述した場合です。
それに対して下段の映像はYouTubeにアップロードした動画になります。
YouTubeにアップロードすれば同じようなことが出来るのに、なぜわざわざVIDEOタグを使う必要があるのか。なんですけれど、VIDEOタグの場合、
- YouTubeにアップロードするより高画質
- ページが表示させたと同時に再生させることが出来る（パソコンで表示させた場合のみ）
という利点があるので、使い方によってはYouTubeよりこちらの方がいい。という場合もあるかもしれません。
たとえば、好きな動画をサーバー上にアップロードして自分だけのオリジナル再生リストにしたり。
ただ、難点としてはiPhoneで再生できる形式でないと再生できない点。
今のところ、H.264でエンコードしたものは再生できるのですが、1980×1080のフルハイビジョンだと再生できないみたいです。
また、同じH.264でエンコードしてあるはずのAVCHDやハイビジョンビデオカメラで撮影した映像も、そのままだと再生できないみたいです。
VIDEOタグ 属性
VIDEOタグには、プロパティというか属性を指定することが出来ます。
| 属性 | 値 | 説明 |
| src | URL | 動画へのパスやURLを指定します |
| controls | --- | シークバーやプレイボタン、音声調節などのコントロールバーを表示させます |
| loop | --- | エンドレスで再生させることが出来ます |
| preload | none auto metadata | 指定しないと「auto」で、一般的なブラウザは再生させなくても動画を読み込むみたいです。 「metadata」にすると、再生時間やサイズ等のみ読み込みます。 「none」にしておくと読み込みません。動画はどうしてもファイルサイズが大きくなるので、出来れば「none」にしておいた方がいいかも。 |
| poster | 画像 URL | 動画のイメージ画像を指定することが出来ます。 preloadをnoneやmetadataに指定すると真っ白に表示されてしまい、動画かどうかがわかりません。 なので、動画のイメージ画像を指定することが出来ます。 |
| autoplay | --- | ページを表示させたときに自動的に再生させるかどうか。 ただし、iPhoneでは効果がない |
| width | 数値 | 横幅を指定できます。 1280pxの動画でも450pxのように指定できます |
| height | 数値 | 高さを指定できます |
VIDEOタグで再生できる動画
iPhone
iPhoneでは、H.264やQuickTime用のMOVといった動画形式でないと再生出来ません。
そのため、AVIやWMV、MPEGなどは再生させることは出来ません。
また、H.264でも1980×1080のフルハイビジョンなどは再生できないようで、いったんTMPGEncやVideoStudioのようなビデオ編集ソフトでエンコードしてやる必要があります。
一応、1,280×720だと再生出来るようです。
パソコン
パソコンの場合は、使うブラウザによって違うようで、Internet Explorerだと、H.264。
Goolge Chromeの場合は、oggやwebm形式であれば再生できるようです。
ただ、現在はGoogle ChromeでもH.264も再生出来るみたいですが、googleのよるとサポートは終了するようで、今後はどうなるかわからない状況。
やっぱりYouTubeにアップロードするのが正解なのかな。と思います。
またHTML5に対応していないInternet Explorer7ではVIDEOタグは、有効になりません。
HTML5に対応していないブラウザ用に、
<p>VIDEOタグに対応していないブラウザです</p>という代替えを記述しておくといいでしょう。
動画ファイルをいくつも指定できる
このように環境やブラウザによって、再生出来たり出来なかったりするので、動画ファイルは複数指定することが出来ます。
<source src="aaa.mp4">
<source src="aaa.ogv">
<source src="aaa.webm">再生出来る動画があると、それよりあとに記述された指定は無視されます。
まとめ
ハイビジョンビデオカメラで撮影したハイビジョン動画を直接YouTubeにアップロードした場合、解像度は1980×1080のフルハイビジョンなんですけれど、映像ビットレート（数値が大きい程高画質。一般にハイビジョンビデオカメラで撮影した場合、15～25Mbps）が5～8Mbpsまで落ちてしまいます。
VIDEOタグで再生させる場合、H.264でエンコードし、映像ビットレートを15Mbpsに出来るので、iPadやパソコンでより高画質で再生させたい場合は、役に立つと思います。
iPhoneでYouTubeを見る場合、再生させようとすると強制的に全画面表示になってしまいますが、このVIDEOタグの場合も、実は全画面になって再生されます。
そのため、訪問者にとってはVIDEOタグなのかYouTubeなのかわからない状態で表示されます。
当然、autoplayを指定していてもiPhoneではタップしない限り再生されません。
iPhoneは、16～64GBの容量がありますが、16GBの製品だと動画を大量に入れておくとメモリがすぐにいっぱいになってしまうので、レンタルサーバーを借りている人はサーバー上に動画をアップロードしてクラウド的にVIDEOタグを埋め込んだページを作り、自分流の再生リストを作る場合にはいいかもしれませんね。
ただ、現在はYahoo!ボックスというちょう大容量なクラウドサービスが登場してきたので、あまり活躍する場面はないかもしれませんが・・・。
最終更新日 2021-01-09 5:04
Sponsord Link
最終更新日 2021-01-09 5:04 / 投稿日：2011-12-21
| 
| 
| 
