ここではjQueryのプラグインBigVideoで背景を動画にする方法を紹介しています。
デモはこちら
https://office-goto.info/demo/bigvideo/
※音が出ます
ダウンロードはこちら
http://dfcb.github.io/BigVideo.js/
headで読み込み
<link rel="stylesheet" href="./css/bigvideo.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="./js/video.js"></script> <script src="./js/bigvideo.js"></script>
jquery,jquery-ui,video.jsは別に用意する必要があります。
jquery,jquery-ui
https://developers.google.com/speed/libraries/devguide
video.js
http://www.videojs.com/
1つの動画を再生
$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('vids/vid.mp4'); });
複数の動画を順番に再生
$(function() { var BV = new $.BigVideo(); BV.init(); BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true}); });
クリックで動画を再生
var BV = new $.BigVideo(); BV.init(); $(function() { $('.playlist-btn').on('click', function(e) { e.preventDefault(); BV.show($(this).attr('href')); }); });
<a href="vids/vid.mp4" class="playlist-btn">video</a>
一時停止
BV.getPlayer().pause();
これで背景に動画を再生できます。
必要に応じてz-indexなどでコンテンツの表示を設定してください。