HTML5の<video>タグで動画を埋めこむ。

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

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

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

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

HTMLのマークアップ

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

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

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

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

まとめ

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

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

WEB制作についてのご相談はお気軽にどうぞ。

WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/フルスタックwebデザイナー

2009年1月よりフリーランスのディレクター/フルスタックWebデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。

アーカイブ