全画面背景動画メモ : その他
全画面背景動画のメモです。
動画について
参考スライド
下記のスライドで動画についてとてもわかりやすく解説されています。
WEBでつかう動画形式
動画フォーマットはファイル形式(例 MP4)と圧縮方式(例 H.264)で構成されます。
ファイル形式MP4、圧縮方式H.264の動画でもモバイルデバイス(スマートフォン、タブレット)で表示されないことがありました。
Miro Video ConverterでiPhone向けとして書き出した動画はモバイル端末で再生できました。
ファイル形式
ファイル形式はmp4を用意します。
より視聴環境を広げるときはとwebm、Ogvも用意することを検討してくだい。
- mp4
video/mp4
「MPEG-4 Part 14又はMP4（エムピーフォー）、正式名称ISO/IEC 14496-14:2003は、ISO/IEC JTC 1の動画像圧縮符号化の標準規格であるMPEG-4の第14部で規定されているファイルフォーマット。] (Wikiより引用)
MP4 – Wikipedia - webm
video/webm - ogv
video/ogg
圧縮形式
- H.264(=MPEG-4)
コンバーター
MP4形式からwebm, ogg形式へ変換するソフトです。
http://www.mirovideoconverter.com/
iPhoneの動画
iPhoneのカメラで撮影した動画はM4Vになります。
M4V MP4 変換。オンライン フリー
コード
HTMLのサンプルです。
<video width="640" height="360" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<img src="movie.jpg" alt="読み込む画像">
</video>
YouTube
公式アイコン
https://www.youtube.com/yt/brand/downloads.html
背景全画面動画
方法1 基準を動画右下とする例
基準を動画右下にする標準的な例です。
ラッパークラスが必要ありません。
index.html
<html>
<body>
<video autoplay loop poster="images/example.png">
<source src="example.mp4" type="video/mp4">
</video>
</body>
</html>
style.css
html, body {
margin: 0;
}
video {
bottom: 0; /* bottomが0のとき上がはみ出すのでスクロールバーが表示されずに済みます。 */
min-height: 100%;
min-width: 100%;
position: absolute;
right: 0; /* rightが０のとき左がはみ出すのでスクロールバーが表示されずに済みます。 */
}
min-width: 100%, min-height: 100を指定することで動画は全体を覆います。
画面縦横比と画像縦横比が異なるときは縦、横どちらかがはみ出します。
ただ上記例ではbottom: 0;を指定するので上へはみ出します。
ブラウザ上へはみ出した部分は表示しないので上部が切り取られることと同じとなります。
またright: 0;を指定するので左へはみ出します。
ブラウザの左側へはみ出した部分は表示されないので左側は切り取られることと同じとなります。
方法2 基準を動画左上とする例
index.html
<html>
<body>
<div class="video-wrapper">
<video autoplay loop poster="images/example.png">
<source src="example.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
style.css
html, body {
height: 100%;
margin: 0;
width: 100%;
}
.video-wrapper {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
video {
left: 0; /* left: 0; このとき動画は画面の右にはみ出すのでスクロールバーが表示されます。 */
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0; /* top: 0; このとき動画は画面の下にはみ出しスクロールバーが表示されます。*/
}
min-width: 100%, min-height: 100を指定することで動画は全体を覆います。
画面縦横比と画像縦横比が異なるときは縦、横どちらかがはみ出します。
親要素へoverflow:hiddenを指定してはみ出した部分を非表示いします。
方法3 基準を動画中央とする例
index.html
<html>
<body>
<div class="video-wrapper">
<video autoplay loop poster="images/example.png">
<source src="example.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
style.css
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.video-wrapper {
height: 100%;
overflow: hidden;
width: 100%;
}
video {
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
transform:translate(-50%, -50%);
top: 50%;
}
min-width: 100%, min-height: 100を指定することで動画は全体を覆います。
中央を基準とするためleft: 50%, top: 50%, transform:translate(-50%, -50%)を指定します。
画面縦横比と画像縦横比が異なるときは縦、横どちらかがはみ出します。
親要素へoverflow:hiddenを指定してはみ出した部分を非表示いします。
モバイル対応
<video id="vido ....></video>
<div id="play">play</div>
<div id="pause">Pause</div>
iPhoneは動画は自動では再生しません。
また再生は動画プレーヤーが開きます。
動画プレイヤーの完了をクリックしブラウザへ戻ると再生ボタンが表示されませんでした(iPhone 7)。
対策としてJavaScriptで再生できるようにしました。
$( '#play' ).on( 'click', function () {
var v = document.getElementById("video");
v.play();
return false;
} );
Appendix background-size: cover
CSS3で追加されたプロパティでIE9以上対応です。
background-size: cover;
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
http://www.htmq.com/css3/background-size.shtml
画面縦横比と画像縦横比が異なるときは縦、横どちらかが切り取られます。
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。