<video>要素の poster 属性について

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有

HTML5 にて新たに導入された<video>要素

今回は、<video>要素の poster 属性についてです。



poster 属性とは。

<video>要素poster 属性とは、動画が再生されるまでの間表示される静止画(ポスター・フレーム)の URL です。



何のためにあるの?

HTML5 の仕様書には、poster 属性で与えられるポスター・フレームは閲覧者が一目でどんな動画か分かるような動画の一場面を見せる事を想定しているとしております。

  • 典型例として、動画開始時の一コマなどが考えられます。

お恥ずかしい話ですが、制作者は動画が再生されるまでの間見せる広告にも使えそうだと思い、そのように書いておりましたが、そのような使い方は仕様では想定していない(≒宜しくない)使い方となってしまいます。

  • ただ、そう言う使い方をする方も出そうですな…。


静止画の形式は?

ポスター・フレームに用いられる静止画の形式は特に問いません。

すなわち、ポスター・フレームに用いられる静止画は、JPEG 画像でなくても、例えば GIF 画像やビットマップであっても(ウェブブラウザが取扱える形式であれば)何でも構いません。



静止画がアニメーテッド画像の場合は?

ポスター・フレームとして指定された静止画がアニメーテッド GIF 画像の場合、仕様で明確な取扱は決められていないのですが、試したところ、最新のファイヤーフォックス, グーグルクロム及びインターネットエクスプローラ 11 ではいずれもアニメーテッド表示を行っております

  • 英語で書かれた仕様書では、poster frame と言う語句は常に単数形になっているため、該当するフレーム(コマ)は一つだけとなり、従ってアニメーテッド画像の場合、最初の一コマのみがポスター・フレームとして扱われる事も充分考えられます。

ポスター・フレームにアニメーテッド GIF 画像を巧く活用すれば、動画のスライドショウを動画代りにご覧頂く事も可能になるかも…?

  • ただ、アニメーテッド GIF 画像の内容が悪いと、スライドショウを見ただけで充分となってしまい、動画の再生ボタンをクリック/タップしてもらえなくなる恐れもあるでしょう。


静止画と動画の解像度が異なる場合は?

ところで、ポスター・フレームに指定された静止画が埋め込む動画と異なる解像度の場合、どう扱われるでしょう?

HTML 5 の仕様に拠れば、ポスター・フレームの解像度は縦横とも以下のように扱われます:

  1. ポスターフレームが存在し、且つそれを表示している場合:埋め込まれた当該<video>要素の表示上の解像度に従います。
  2. ポスターフレームは存在するが、現在それを表示していない場合:埋め込まれる動画の本来の解像度に従います。
  3. その他の場合:解像度の情報がないものとします。

以上より、埋込む動画がポスター・フレームに指定された静止画と異なる解像度の場合、指定された静止画は縦横がそれぞれ動画に合わせて適宜拡大または縮小される事となります。

  • このため、例えばモバイル用に縮小してエンコードした動画に対し、縮小前のワンシーンの JPEG 画像をポスター・フレームに指定しても解像度の問題でトラブルになる心配はない事となります。


実装上の注意点



動画再生後の扱い

動画を再生し終わると、最後のコマを表示したままとなり、自動的にポスター・フレームに戻る事はありません。

もし、再生後もポスター・フレームを表示させたいなら、動画の最後のコマにそのフレームと同じ画像を入れるのが最も確実な方法でしょう。



ゲッコウ系ブラウザでの扱い

ファイヤーフォックスやペールムーンなどのゲッコウ系ブラウザの場合、動画が正しく読み込まれるまではポスター・フレームは薄暗く表示されます。

特に、

  • 動画が正しく読み込めなかった
  • または動画のコーデックやコンテナが取扱えない形式だった

場合には、暗く表示されたポスター・フレームの中央に英語でエラーメッセージが表示されます。

いずれにしても、ポスター・フレームを広告など本来の目的───閲覧者にどんな動画かを分かってもらう事───に沿わない目的で使う場合には注意した方が良いでしょう。

関連記事
スポンサーサイト