Facebookの公開グループ「webクリエイターのための情報交換所」は有用な情報が流れるので、いつも参考にさせてもらっています。先日も著作権フリーの動画についての情報があり、興味があったのでダウンロードしてどんな風に使えるかを試してみました。
それについて書きます。
著作権フリーの映像がダウンロードできるサイト
紹介されていたblog記事はこちらになります。
著作権フリーの映像がダウンロードできるサイト Pexels Videos
cc0ライセンスなので商用利用もOKでクレジットも不要です。
音声はカットされてるようなのでそのまま使えるのもありがたいですね。
と、あるように使い勝手が良さそうです。
画像のフリー素材はわりとたくさんありますが、動画のフリー素材は今回初めて見ました！いくつか見てみるとかっこいい動画が多く、使ってみたいと思わせるモノがたくさんあります。
HTMLの背景で動画を使ってみる
最近baserCMSに関する情報を集めていて、その開発元である 株式会社キャッチアップ さんのサイトを見ていて「おぉぅ！背景が動画だ…」と思っていたところなので、ちょっと背景に動画を使ったらどんな風になるんだろう…と興味が湧いていたところでした。
HTMLでどうやったらそれができるのか？ということもググって調べました。ということで早速チャレンジしてみます。
背景にしたい動画をダウンロードする
まず、動画配信サイトに行ってどの動画がいいか見てみます。
自転車が好きなので、↓この動画を使うことにしました。
Download For Free ボタンをクリック すると…全画面で動画が表示されてしまいます(>_<)。
ということで、右クリックして 名前を付けてリンク先を保存 をクリック、PCの任意の場所に 343014810.mp4 という名前のファイルを保存します。
ダウンロードした動画をHTMLの背景に使ってみる
動画を背景にする、という方法についてググって
こちらを発見しました(^^)/。なるほど、HTML5の技術でできそうなんですね。
動画をダウンロードしたフォルダに movie.html というファイルを作って、
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background: #000;
}
video {
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
p {
font-family: serif;
color: #fff;
font-size: 400%;
margin:20px;
text-align:center;
position: relative;
z-index: 2;
}
.divText {
text-align:center;
position: relative;
z-index: 2;
}
.centerText {
text-align:center;
width:80%;
font-family: serif;
padding:20px;
font-size:2rem;
margin:auto;
background-color:#fff;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<p>Cycle Links</p>
<video src="343014810.mp4" poster="cycle.png" autoplay loop>
</video>
<div class="centerText">
We love cycling.
<div style="margin:20px;">
<a href="http://over40.jitelog.jp/" target="_blank"><img src="40.png" style="width:90%"></a>
</div>
</div>
</body>
</html>
こんな感じのコードを書いてみました。
ポイントは、
z-index: 1;
でvideo(動画)のレイヤーを一番下にしておいて、その上に表示したいものを
position: relative; z-index: 2;
で動画より上のレイヤーに表示する、という感じのようです。勉強になります。
ブラウザで表示するとこんな感じになります。
静止画ではよく分からないのでアップロードしてみました。
やはり動画を使っているので、ローカルでテストしてるときは動きが速いですが、サーバに上げるとちょっと遅くなりますね。
まとめ:iPhone対応などがまだ…
iPhoneでこのサイトを見てみたのですが、
こんな感じで、動画が背景として表示されませんでした。
色々調べて
poster="cycle.png"
と付けて背景の静止画を指定してみたのですがダメなようです。この辺はもうちょっと勉強が必要そうです(>_<)。
とはいえ、この著作権フリーな動画はHTMLとかだけでなく、Powerpointなどの背景とか、企業などの宣伝用動画にも使えそうでこういうサイトはありがたいですね(^^)/。忘れずにブックマークしておきたいサイトだと思います。
コメント