動画背景/video only or jQuery plugin/OSとデバイスの再生可否をユーザーエージェント切り替えで乗り切る
表示確認したOSとブラウザ
- Android 6.0/Chrome
- Android 6.0.1/Chrome
- iOS 9.3.5/Safari
- iOS 11.1.2/Safari
- macOS 10.12.1 Sierra/Chrome, Firefox, Safari
- Windows 7/Chrome, Firefox, IE 10, 11
- Windows 10/Edge
OSとブラウザの再生可否
html videoのみでは再生できない
- Android 6.0
- iOS 9以下 ※10以上からOK
jQueryプラグインが動かない
- iOS 9.3.5, 11.1.2
- macOS 11 High Sierra/Safari
これらを何とかしようとする人がたまにいるが、無駄なので止めてあげよう。
デモで利用したファイル
- フリー素材mp4
- jQuery 2.2.0
- jQuery Vide
- Animate.css
mp4は元ファイルを、
- 15秒
- 解像度 960×540
- コーデック H.264
- ビットレート 500kbps
- 音声削除
- 黒ふち削除
にて変換、容量は約1MB。
高画質動画ファイルを使うと、高スペックPCですらブラウザフリーズが発生したりするのでやっちゃいけない、スマホでは論外。
デモで実装していること
- iOS/macならhtml videoを、それ以外のOSならVideコードを追加
- 自動再生とループ
- 動画領域の高さ指定は%不可だが、px/vhなら使える
- 横幅は px/%/vh 全て使える
- 静止画は再生プレイヤーの0秒をキャプチャしてJPEG作成、縦横サイズ・ファイル名は動画と同一
- 低画質をごまかすため、2×2のPNGを背景リピートで網掛け状に
- ブロック直書きの style=”opacity: 0;” は読み込み時のチラつき防止
フルブラウザ
macでは領域に収納できておらず不格好だが、面倒なので修正していない。
1 2 3 4 5 6 7 8 9 10 11 | <body> <div id="keyvisual" style="opacity: 0;"> <div id="inner-keyvisual" style="opacity: 0;"> <p>text</p> <!-- /#inner-keyvisual --></div> <!-- /#keyvisual --></div> <p>text/p> <script src="js/jquery.min.js"></script> <script src="js/javascript.js"></script> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | #keyvisual { width: 100%; height: 100%; position: relative; overflow: hidden; } #keyvisual-video { height: 100vh; position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; z-index: -1; margin: auto; } #inner-keyvisual { height: 100%; color: white; position: static; z-index: 1; padding: 20px; background: url(../images/bg-keyvisual.png); } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { animation-duration: 1s; animation-fill-mode: both; } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { animation-name: fadeIn; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /* Video only or with jQuery Author: KEITA HIRAI URL: keitahirai.net */ var ua = navigator.userAgent.toLowerCase(), Android = ua.indexOf("android") >= 0, iPhone = ua.indexOf("iphone") >= 0, iPad = ua.indexOf("ipad") >= 0, iPod = ua.indexOf("ipod") >= 0, Linux = ua.indexOf("linux") >= 0; Mac = ua.indexOf("mac") >= 0; Windows = ua.indexOf("windows") >= 0; $(function() { // video only if (iPhone || iPad || iPod || Mac) { $('#keyvisual').prepend('<video id="keyvisual-video" src="video/keyvisual.mp4" poster="video/keyvisual.jpg" playsinline autoplay loop></video>'); } // jquery.vide else { $('#keyvisual').attr('data-vide-bg', 'mp4:video/keyvisual'); $('body').append('<script src="js/jquery.vide.js"></script>'); } // キービジュアルブロック $('#keyvisual').addClass('animated fadeIn').css({ "animation-delay": '1s', "-webkit-animation-delay": '1s' }); // キービジュアル中身 $('#inner-keyvisual').addClass('animated fadeIn').css({ "animation-delay": '2s', "-webkit-animation-delay": '2s' }); }); |
ブロック領域
HTML/JavaScriptはフルブラウザと同じ、SCSSはブロックのwidth/heightのみ修正。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #keyvisual { width: 50%; height: 50%; position: relative; overflow: hidden; } #keyvisual-video { height: 50vh; position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; z-index: -1; margin: auto; } |
3コメント
すいません質問です。demoページのファイルをダウンロードしてローカルで表示させたら背景動画がちゃんと再生されますが、サーバーにアップして試にiOSから表示させたら動画がうまく再生されません。demoページを同じiOSから表示させたらちゃんと再生されます。
demoページのソースでiOSで表示させる何か特別な事をしているのでしょうか?
ssさん
こんにちは。
特別な事をした覚えがないため、demoを調べないと何とも言えません…。
すみませんもうしばしお待ちください。
demoを調べましたが、やはり特別な事は施していませんでした。
PCやAndroidでは表示されるでしょうか? またはパスやファイル名を間違えていないか、今一度確認してみてください。