FLASHを使わずにビデオ再生させるには

HTML5になってからタグでビデオ再生に対応しました。これによりFlashを埋め込まなくてもHTML5自体でビデオを直接再生できるようになりました。ただし、問題もあります。

 
 

Home  About  BBS  Mail  Link

 
 

FLASHを使わずにビデオ再生させるには

 

 

Last update 2011/12/21 11:09

 

ブログやサイトに動画を表示させるには、一般的にはYouTubeにアップロードして、タグを貼ってFlashで再生させるのが一般的ですが、HTML5からFlashプレーヤーを埋め込まずに再生させることが出来るようになりました。
iPhoneのブラウザSafariは、HTML5に対応しているので今回は、iPhoneでも再生できるページにビデオを埋め込むタグを紹介します。
まずは、下の例を見てください。

動画名解像度映像ビットレート
m2t_5.mp41280×72014000kbps
VIDEOタグを使用した場合
<video controls  poster="./img/201112/20111221-401727-2-m.jpg"
 width="450" loop preload="none">
<source src="./movie/m2t_5.mp4">
<p>VIDEOタグをサポートしていません。</p></video>
YouTube1920×10805000kbps前後
YouTubeとFlashを利用した場合
<iframe width="450" height="259"
 src="http://www.youtube.com/embed/5NZ4aJj0FFg?hd=1"
 frameborder="0" allowfullscreen></iframe>

上の映像は、当サイトのサーバー上に動画をアップロードして、VIDEOタグで記述した場合です。
それに対して下段の映像はYouTubeにアップロードした動画になります。
YouTubeにアップロードすれば同じようなことが出来るのに、なぜわざわざVIDEOタグを使う必要があるのか。なんですけれど、VIDEOタグの場合、

  • YouTubeにアップロードするより高画質
  • ページが表示させたと同時に再生させることが出来る(パソコンで表示させた場合のみ)

という利点があるので、使い方によってはYouTubeよりこちらの方がいい。という場合もあるかもしれません。
たとえば、好きな動画をサーバー上にアップロードして自分だけのオリジナル再生リストにしたり。
ただ、難点としてはiPhoneで再生できる形式でないと再生できない点。
今のところ、H.264でエンコードしたものは再生できるのですが、1980×1080のフルハイビジョンだと再生できないみたいです。
また、同じH.264でエンコードしてあるはずのAVCHDやハイビジョンビデオカメラで撮影した映像も、そのままだと再生できないみたいです。

VIDEOタグ 属性

VIDEOタグには、プロパティというか属性を指定することが出来ます。

属性説明
srcURL動画へのパスやURLを指定します
controls---シークバーやプレイボタン、音声調節などのコントロールバーを表示させます
loop---エンドレスで再生させることが出来ます
preloadnone
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!ボックスというちょう大容量なクラウドサービスが登場してきたので、あまり活躍する場面はないかもしれませんが・・・。

 

カテゴリー

同じカテゴリーの記事

にほんブログ村 携帯ブログ iPhoneへ 2010/08/21 20:03 | このページのトップへ | コメントを書く | 管理