ここまでできる!HTML5で追加されたvideoタグが便利すぎる件

ここまでできる!HTML5で追加されたvideoタグが便利すぎる件

2015年の Webデザイン・トレンドでもある「動画」。多くの場合、バックグランドに動画を設置することで、Webデザインに活かされていますが、それ以外にも動画の使い方はいろいろとあります。

HTML 5 が 2014年 10月に正式にリリースされて 1年が経つ今、HTML 5から新たに追加された <video> タグ の可能性についてふれてみたいと思います。<video> タグがはじめての方もいらっしゃると思いますので、直感的に <video> ってスゴイと思えるようなサンプルをいくつかピックアップしてみましたので、ご参照ください。

目次
  1. ここまでデキル!HTML 5 を使った動画演出
  2. 改めて HTML 5 の動画について
  3. video + SVG
  4. video + CSS + SVG
  5. video + JavaScript
  6. video + JavaScript + CSS
  7. 参考になるモバイルでの動画?表現
  8. まとめ

ここまでデキル!HTML 5 を使った動画演出

改めて HTML 5 の動画について

image

2008年に HTML5 の草案がリリースされるまで、Web上で動画を再生させようと思うと object classidembed を使ったコーディングが主流でした。しかし、このやり方ではブラウザ間の違いをカバーしきれず、再生できたり・できなかったりという状況がありました。

こうした問題を無くすために、HTML 5 では <video> タグが開発され、ブラウザに関係なく、安定した動画映像を提供できるようになっています。

また、 <video> タグには 9つの属性があって loop や autoplay と一言記述するだけで簡単に動画制御することができたり、CSS や JavaScript を使って応用することもでき、ただ映像を流すだけでなく Web ならではの動画力を発信できるようになってきています。

HTML初心者の方へタグの使い方をまとめましたのでこちらも合わせてどうぞ。

HTML 5 <video> タグ 9つの属性

autoplay/自動再生、 controls/操作パネルの表示、 height/動画の縦幅、 loop/繰り返し再生、 muted/無音設定、 poster/動画再生前に表示される画像、 preload/動画ファイルの読み込み指示、 src/動画ファイルの指定、 width/動画の幅

例えば、動画のみを表示する場合は、以下のような記述で OK ですが、

<video controls><source src="http://bitcoin-with.com/codecamp/test-movie.mp4" ></video>

これに自動再生 + 繰り返しを加える場合も、autoplay と loop を加えるだけで済みます。

<video controls autoplay loop><source src="http://bitcoin-with.com/codecamp/test-movie.mp4" ></video>

このように動画が扱いやすくなった HTML 5 の <video> タグを活用して、Web デザインに参考にできそうな例をいくつかご紹介していきたいと思います。

**現行のWordpress についても動画が扱いやすくなっていますよね。 動画挿入のテキスト例/

[video mp4="http://bitcoin-with.com/codecamp/test-movie.mp4[ autoplay="y" loop="y"][/video]

**[]を半角にしてテストしてみてください

video + CSS

動画映像を丸ごと動かす表現

image photo : ronallo.com <video> を CSS でスタイル指定し、回転要素を加えると、動画が回転しながら再生される例です。こちらからご覧いただけます。

動画映像を切り抜いて、アニメーション表現

image 動画を好きな枠で切り抜いて、CSS でアニメーションをプラスしている例です。すこし CSS の設定がややこしいですが、JavaScript に頼らなくてもユニークな演出ができる動画表現の例と思います。(CODEPEN/Steve Belovarich さん作

video + SVG

なめらかな文字演出

image 動画表面に SVG でマスク設定し、文字を浮かび上がらせている表現方法になります。

video + CSS + SVG

オシャレなログイン画面

image ログインの枠内だけぼかし装飾を実装している例になります。

video + JavaScript

オリジナルのコントロール・パネル

image photo : treehouse <video> タグのノーマルで用意されているコントロールパネルではなく、オリジナルのコントロールを JavaScript を活用することによって実装している例です。(動画再生

複数の動画を自動再生

image HTML5 で採用された <figure> と <figcaption> を利用して、動画キャンプチャを整理し、JavaScript で動画を制御している例になります。(CODEPEN/Dudley Storey さん作

動画をコマ送りで表現

image 動画の映像をスクロールダウンと連動させて、コマ送りで演出している例になります。(CODEPEN/Nico Prat さん作)全画面設定のコマ送りも CODEPEN にアップされています。

マウスオンで動画スタート

動画キャプチャの上にカーソルを合わせると、いきなり映像が流れ出す表現方法になります。スマホの場合はタップで動画スタートになります。(CODEPEN/GRAY GHOST さん作

シークバー表示で分かり易い動画

image LIG 毎度毎度参考になる web テクノロジーを発信している LIG さんから公開されている VIDEO エッセンスになります。動画にシークバー(再生位置)を表示し、ユーザーが効率よく安心して動画を楽しめるデザインとなっています。サンプルファイルもダウンロードできて、video テクニックの技術向上に活かす事ができます。

巧みな JavaScript コードで立体的に動画を閲覧

image 動画ファイルはテレビ内の映像に使われて、一番目をひくスクリーンの回転は JavaScript で操られています。(CODEPEN/Sascha Sigl さん作

動画 on 動画

image Art Copy & Code Google のテクノロジー紹介ページで、難解な JavaScript で構成されています。ぜひ、デベロッパー・ツールを開いてソースコードをチェックしてみて下さい。

video + JavaScript + CSS

YouTube API を使った動画表現

image スクリーンの上下にフィルターを設定し、映画っぽい演出を行っている例になります。映像は、YouTube の API を使ってひっぱってきて、iframe で型決めしています。スマホでも横スクリーンにするとフィルター効果を確認できます。(CODEPEN/Rewfergu さん作

参考になるモバイルでの動画?表現

プジョー

image モバイル時は動画からスライドショーの表示に切り替わりながらも、スタイル要素の巧みな操作で、動画さながらの動きを演出しています。

まとめ

いかがでしたでしょうか?HTML 5 の <video> タグも CSS や JavaScript などを使ってアレンジすると、表現の可能性は無限大に広がることがわかります。

まだ <video> タグを体験したことのない方は、とりあえずどんなものか CODEPEN などからソースをダウンロードして実行してみることをお勧めします。

また、もっと <video> タグについて知りたいという方は、W3C の video tag ページを参照されると役に立つと思いますよ。それでは <video> を活かして、Web制作に励んでいきましょう!

オシママサラ
ライター
オシママサラ

関連記事