【HTML】videoタグで簡単にWebサイトをリッチに見せることができる話

更新日:

プログラミング初心者の勉強ブログ #62

画面を動かすのはCSSとJSだけじゃありません。videoタグで動画を埋め込んで、一歩進んだWebページを簡単に作成するための方法を解説します。グレースケールなど、簡単なアレンジ方法も紹介。

 

目次

 

videoタグの使い方

今回はHTMLタグの一つである「videoタグ」の使い方を紹介します。

完成品

 

上の画像のページは、まだCSSアニメーションやJSを一切使用しておりませんが、videoタグで動画をオートプレイすることで画面に動きが出ております。

 

動画を探す

上の画像の動画はフリー素材のもので、

モーションエレメンツ

ここでダウンロードさせていただいたものです。無料でフリー素材の動画をダウンロードできるので、利用させていただきました。あまり検索に時間をかけてないので、もっと良いサイトもあるかもしれません。

 

動画の容量を確認する

動画をダウンロードした後、容量を確認します。今回の場合、最初「40.6MB」と重かったので、とりあえず容量を下げる必要がありました。以前動画を使用している実在サイトのCSSをディベロッパーツールで見てたとき、容量が1.5MBのものを使用していたので、そのくらいを目安に落としていきます。

videosmaller

上のサイトを利用しました。仕組みはよくわかりませんが、サイズなどを小さくすることで40.6MBから3MBまで容量を落とすことができました。最低でも3MBまでは落とすべきと、どこかのサイトで見かけた記憶があるので、これでもギリギリです。

 

HTMLにコーディング

表示するための動画が用意できたら、実際にHTMLにコーディングしていきます。

 

index.html

 

videoタグは<video>と<source>で構成します。<video>タグのみでも動画を表示させることはできるのですが、<source>タグを使用することで、端末やブラウザに応じた、動画表示の分岐をコーディングすることができるのようなので、今後のことも考えsourceタグで今回は書いております。

<video>タグ内は、最初idとclassを定義し、そのあとに「loop muted data-autoplay ...」と、スペースで区切りながら動画の各種設定をします。

videoタグ リファレンス

各種属性の仕様については、リファレンスで確認お願いします。

<source>タグはsrc属性で動画の相対パス、type属性で動画のフォーマットを書いてます。

 

これで終わりです。あとはvideoタグにつけたclassに、お好みのCSSをつけるだけなのでとても簡単です。

video見本

 

CSSでのアレンジ

おまけ程度ですが、CSSを使用した動画のアレンジを紹介します。

 

filterプロパティでグレースケール化

「filter」プロパティを使用すれば、簡単に動画をグレースケールにすることが可能です。

 

style.css

 

見本の動画は80%でグレースケールをCSSでかけております。100%もしくは()の中身を空にすれば、完全なグレースケール化が可能です。

filterプロパティはグレースケールだけでなく、セピア調やコントラストなどもアレンジできるので、頭に入れとくと幅が広がると思います。

 

CSS filterプロパティとFilter Effectsの話

一応載ってる記事貼っておきます。

 

動画にドット加工

動画の容量を下げると、どうしても画質が荒くなります。そんなときは、動画に「ドット画像」を動画に組み合わせることで、画質の低さをカバーすることができます。今回作成したものも、ドット加工をしております。

 

index.html

 

style.css

 

動画と同位置に、同じサイズで、背景画像に透過性のあるドットの画像「dot.png」を設定したdivをかぶせることで、加工することができます。

 

ドット加工のサイトの見本も載せておきます。気になる方は以下のサイトで確認ください。「A-net」というアパレルの会社のリクルートサイトです。

A-net Inc

 

まとめ

videoタグは非常に簡単に設定でき、Webページに動きを出すことができるので、うまく活用できるとWebデザインの幅が広げることができます。良い動画素材があればなと思います。自分で作れればいいんですけど、流石に動画編集までやり始めるとYouTuberみたいになってしまうので、それはやめときます。

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.