動画を背景にしたWEBSITEの作成
Categories： TECHNOLOGY
背景に動画を全面に使ったWEBSITEが流行ってますが、全面だと色々なパターン気にしなければ行けなさそうで
それなら決め打ちでpixel指定で枠作ったら縦横比がおかしくなったりRETINA DISPLAYで解像度で残念な気持ちにならなくていいのかなと思い。
奮闘してみました。一日でできなければやめます。
まず調べた所
1.動画はmp4とoggは少なくとも用意しておく必要がありそう。
これはお手軽なオープンソース?の変換ソフトがあったのでどうにかなりそう -> http://www.mirovideoconverter.com/
2.お手軽なjQuery
BigVideo.jsを使います。これがすぐみつかったので。
iMovieで吐き出した動画でも(m4v)何かmp4に変換できたっぽいです(oggが微妙だけど何か時間かかりそうなので保留)
※topページのみ
1.動画は.mp4, .webmがあるといい(
-> 本当は.ogvもあるといいけどいい変換ソフトが無かった
-> 何かなくても再生できてるっぽい。
- jQuery使わなかった。
->スタイルシートだけでOKだった。
->videoタグが使えるのは必須 3.スムーズに再生させるために動画を1MBぐらいにした
->粗がひどかったのだけど、z-indexでドット画像をかぶせるのがすごくあら隠しで来て良い感じだった。
これ考えた人本当えらい。
4.全体表示はたしかにかっこいいけど、動画をどう見せるかすごく気を配らなければいけない
->今回はもう動画を流す枠を決め打ちしていたので(1280×720)動画をその解像度で作ってしまえばよかった。
解像度によってかけることもないし、念のための大きい容量で作る必要もなくなったので確かな安心。
5.一応モダンブラウザ制覇? IE10 firefox, chrome, opera ,safariは全部OKただし、iPhoneはダメだった。
そんな感じで、menuの位置とかがだいぶ微妙ですから
おいおいやっていこー。
Tweet