jQuery BigVideoで背景を動画にする

ここではjQueryのプラグインBigVideoで背景を動画にする方法を紹介しています。

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などでコンテンツの表示を設定してください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください