Webページへ掲載する動画ファイル形式について

  • このエントリーをはてなブックマークに追加

ブラウザ毎に対応ファイル形式が異なる

さて5月の大型連休、ゴールデンウィークもあけました。中には9連休!なんて方もいたようですね。あんまり休みが長くなると働き方を忘れてしまいそうです。
このゴールデンウィークって言葉、映画業界の用語だったんですよね。なんでも昭和26年(1951年)の5月の大型連休に上映された、「自由学校」という映画が正月映画やお盆映画以上の興行収入があったんだとか・・・
そこから黄金週間=ゴールデンウィークという造語が生まれて、いつしか一般的に知られるようになりました。
映画にゆかりのあるゴールデンウィーク、私はこの連休中に映画館で映画をみるぞ!!と意気込んではいたものの、結局出向くことはありませんでした・・・
さてさて、今日はゴールデンウィークにちなんで映像関係のお話をしましょう。

Webページへ動画を掲載する方法はいくつかありますよね。
youtubeへアップした動画を埋め込んだり、HTML5で追加されたvideoタグを使ったりなんて方法がメジャーです。
他のもGIFアニメーションや、画像とCSSを使った、パラパラ漫画の容量で作る動画なんて物もあります。

以前は動画を再生するにはフラッシュを使っていました。
フラッシュは以前はとても重宝されていて、フラッシュ専門の職人もいました。結構プログラムチックな操作が多くて、頭脳労働がスゴイフラッシュ・・・学生時代はむやみに手を出して、あれこれと手を焼きました・・・
フラッシュができれば安泰!!なんて思われていた時期もありましたが、iPhoneの普及に伴いフラッシュの重要性が激減しました。
iPhone、iPadではフラッシュが見れないので仕方ないですね。
当初は「Androidならフラッシュも見れる!」なんて言われていましたが、実際に見てみるとプレイヤーが対応していなかったり、アップデートが大変だったりと、フラッシュを見るのには意外と苦労します。

動画ファイル形式について

動画ファイルって、MP4やWAV、FLV、OGVなどなど・・・たくさん種類がありますよね。
「どのファイル形式でも、videoタグで読み込ませればいいんでしょ?」とか「どのファイル形式でもなんとかなるでしょ?」と思っている方。
そう思っていると、私と同じように結構痛い目を見ますよ。

というのも、以前にvideoタグで動画を埋め込んで、普段使うブラウザで確認したところ表示!!
結構簡単に設置ができて、めでたしめでたし・・・と思ったのもつかの間・・・
別のブラウザを立ち上げてチェックしていたら、動画が再生されないではありませんか!!!
あれこれと調べてみると、動画ファイルの形式の他に、ブラウザ別に再生できないファイルがあることがわかりました・・・

だいたいがMP4で大丈夫!だけど・・・

最新バージョンのインターネットブラウザなら、ほぼMP4の動画ファイルで何も問題ありません。あとはファイル形式をMP4へ変換したり、動画を作成したときの圧縮形式とか、音声ファイルとか、そういったレンダリングの時の設定が間違えていなければWebページで再生することができます。
ですが厄介な子IE・・・この子の存在を忘れてはいけません・・・
そう、古いIEではMP4が再生されない事があるんです。

この問題はvideoタグを使って動画を埋め込んだ場合、あらかじめ数種類のファイルを用意しておいて、最初のファイルが読めなかったら二番目、それでもダメなら三番目・・・と読み込ませる動画を設定しておくことで回避できるのですが、「動画ファイルを変換して、数種類のファイルを作成する」という作業が非常に煩わしいです。
動画を差し替える!なんて時には結構面倒な作業になってしまいますね。
それに動画の細かな設定もなんだか面倒です・・・
もっと簡単にならないか・・・と考えると、やはりyoutubeへの動画アップが一番簡単で手っ取り早い方法でしょう。
youtubeへ動画をアップするときに自動で変換してくれたり、ファイルを圧縮してくれたりと様々な面で動画のアップをサポートしてくれます。
さらにyoutubeを使った動画再生はどのブラウザでもほぼ動作するので、確実です。

またyoutubeは閲覧者が多くいるので、動画の露出が増え、人目につきやすくなります。
もちろんyoutubeを見にくる方をターゲットとしない場合もあるでしょう。でもそれはそれで公開範囲を全体からリンクを知っている人のみに変更し、自社ページへ動画を設置してあげればいいんです。
どの手段を使うのかより、どういったことがしたいのか、どういった結果を得たいのかをメインに考えると、videoタグを使って動画を埋め込んでも、youtubeを使って動画を埋め込んでも、結果は一緒ですよね。
もっというと、youtubeを使ったほうが、再生後に次の動画再生を促すこともできるので、機能的に上な気がします。

表示の見た目でどちらを使うか選ぼう

個人的にはyoutubeを使う方法が簡単でオススメです。
Webサーバーへアクセスする方法が分からなくても簡単に動画をアップする事ができますし、自身の使っているレンタルサーバーのファイル容量上限を圧迫することもありません。
動画ファイルはファイル容量が大きくなってしまいやすいので、レンタルサーバーのファイル容量を抑えられるという事はとても魅力的ですね。

それなら「youtube一択」と思ってしまいそうですね。youtubeのプレイヤーはCSSで加工できませんが、videoタグを使ったプレイヤーならデザインを変える事ができます。
ホームページの見た目やイメージに全く合わない!という場合はvideoタグを使って作り込んでみた方が、思った通りのイメージでホームページを作ることができそうです。

まとめ

・動画ファイルはMP4形式なら、ほとんどのブラウザで再生ができる
・古いバージョンのIEは、MP4に対応していない(IE9以前)
・youtubeへ動画をアップすればどのブラウザでも再生できる
・videoタグを使って設置した動画のプレイヤーはCSSで装飾できる

  • このエントリーをはてなブックマークに追加