以前の記事(http://skygold.co.jp/wp-prod-2023/web/2539.html)で紹介した2015年のwebデザインのトレンドに、フルスクリーン動画を利用したコンテンツというのを取り上げました。

実際昨年あたりから積極的に動画を使用して実践しているサイトが増えてきているので、早速自身のサイトのTOPページでも取り入れることにしました。(http://skygold.co.jp/wp-prod-2023/)

videoタグは、html5の中でも特に注目されている機能の1つです。
これまでは、動画や動きのある表現はFLASHという技術を使用されることが多かったのですが、徐々にHTML5動画のほうへ向かっています。

大きなポイントとしては、

・HTML5動画は、flash playerをインストールする必要がなく、ブラウザでネイティブの動画再生ができる。
・HTML5 動画は、Flash プラグインよりも読み込みが素早いので、ユーザーへのストレスが軽減される。
・Web 開発者の立場からすると、利用が比較的簡単なので、WEBサイト制作に取り入れやすい。
・iOS、Android（4.1 以降)共にFLASHをサポートしていない。

このあたりが注目すべき部分になります。

HTMLのマークアップ

<video>タグを記述し、<source>タグで動画を読み込みます。
<source>タグを使用するとフォーマットの異なる動画データを複数読み込む事ができます。
ユーザーのブラウザがサポートしていない場合に備えて、複数の形式を予備のタイプとして含めることができます。

サーバの環境によっては、.htaccessに下記の記述を含めるとうまくいく場合があります。

AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

動画の画質が荒い場合の小技

動画にノイズが混ざっていたり、荒い場合は、透過pngで縞模様のラインを動画の上に配置してやると、画質の荒さがかなり軽減されます。
<video>タグの前に空の<div>を用意し、ストライプやドット画像（PNGやGIF形式）を背景画像としてCSSで記述します。

まとめ

コード自体は非常にシンプルですが、動画の編集技術が必要になりますので、より訴求力の高い効果的な動画制作をするためのアイデアや技術が必要になります。

それから、ブラウザやデバイス毎に若干CSSの反映のされ方が異なったり、スマートフォンでは自動再生のautoplayが効かないので、このあたりが次の課題になります。

早く全てのブラウザが標準化されてほしいところですね。

webサイトのページ表示速度を高速化するための基本5つ

レスポンシブwebデザインに向くサイト、向かないサイトを考え...