webfeelfree

HTML5のvideoタグを使って動画を貼り付ける時の注意点と問題点

  • HTML

img_20140222

Image by:theQ camera

HTML5ではvideoタグを使って動画を貼り付けることができます。
これまでWebサイトで動画を貼り付ける場合には、FlashやQuickTimeなどを使うのが一般的でした。
theQ camera」は、videoタグを使っています。

videoタグを使えれば、よりリッチなWebサイト作りが出来て、面白そうだなぁ~っと思って、いろいろ調べてみました。
なかなか苦戦したので、概要をメモしておきます。

メイン動画の容量は重要!

最初にメインとなる動画を準備します。
当たり前のことですが、これがないと始まりませんね。

動画の容量調整は難しいところです。
容量が大きいと、表示が重たくなって表示される前に離脱されてしまう可能性が高くなりますし、かといって、容量を小さくし過ぎると画質が粗くなって、見栄えが悪くなったりしてしまいます。

そうならないためにも、画質や再生時間を調整して、大きくても3MBを超えないように、出来れば1MB~500KBくらいを目指して用意しましょう。

メインとなる動画の用意が完了したら、次に各ブラウザで表示できるように必要な動画形式で動画を準備します。

.mp4
.ogv
.webm

の動画形式を準備します。
他にもサポートされている動画形式はあります。
この辺を用意すればPCブラウザは、網羅できるかと・・・。
あとは、必要に応じて動画形式を用意しましょう。

今回、動画の容量調整と動画形式の準備には「XMedia Recode」を使いました。

コーディング

さて、動画を用意してアップロードが完了したら、次にコーディングになります。

HTML

<video autoplay loop muted controls poster="***.jpg">
  <source src="***.mp4" type="video/mp4" />
  <source src="***.ogv" type="video/ogg" />
  <source src="***.webm" type="video/webm" />
  <img src="***.jpg" />
</video>

ザックリ説明を・・・

1行目のvideoタグの属性について
「autoplay」
自動再生を指定

「loop」
ループ再生を指定

「muted」
音を出さないように指定

「controls」
再生コントロールを表示

「poster=”http://***.jpg”」
動画が読み込まれない、再生されない場合、指定の画像を表示

あとは、お馴染みの「width」なども指定できます。
必要に応じて、消したり付け加えたりしましょう。

2~4行目のsourceタグは、複数の動画をリストアップするためのタグになります。
ブラウザは上から順番に再生できる動画ファイルを探して再生してくれます。

5行目のimgタグは、videoタグに対応していないブラウザで閲覧された場合に指定した画像を表示するように設定します。
HTML5に対応していないブラウザへの対策ですね。

うまく再生されない場合

うまく再生されないときは、サーバー側の設定が必要になる場合があります。
ここでのサーバーは、動画本体をアップロードしたサーバーが該当します。

.htaccessなどでAddTypeを設定します。

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm

AddTypeを設定することにより、ブラウザ自体で再生することができるようになります。

ただし、サーバーによっては「AddType」を禁止しているサーバーもありますので注意してください。

ちなみにローカルで動かした場合は、問題なく再生されます。
テストでは動いたのに、本番では、動かない・・・なぜだぁ~!?っとならないように注意しましょう。

補足ですが、Safariに関しては、調べていると「最新版のSafariには対応しています。」という言葉を見るのですが、WindowsのSafariはバージョンアップが進んでいないため、再生されませんのでご注意ください。

デモ


Google ChromeもしくはOperaでご覧ください。

あとがき

結局、サーバーの環境などもあり、中途半端な結果となってしまいました。
それだけ敷居の高いタグのようにも感じましたね。

お手軽で~なんて、思って手を出してみたら痛い目をみます・・・みました。

今回はHTML5でやってみましたが、HTML5だけでなくJavaScriptを使って動画を実装する方法もあります。
サーバーの問題やブラウザの問題などの手間を考えると、jQueryプラグインなどを使って実装した方が、今のところ無難なのかもしれませんね。

早く、この辺の整備も整ってほしいものです。

これから動画の実装に挑戦してみようと思っている人や、問題にぶつかっている人に少しでも役に立ってもらえればと思います。

参考
HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com

最新記事

読まれている記事

ツイッター

カテゴリー