動画もOK！全画面スライドショーが素敵な「vegas Background SlideShow」

「concrete5でTVっぽいコンテンツ管理をしてみたい」という企みがあり、そのための画面構成を検討してるんですが、その途中で見つけたjQueryプラグインが面白かったので紹介。

ちなみに「concrete5でTVっぽいコンテンツ管理って何？」ってことなんですが、３年ほど前に「ハイブリッドキャストTV」というHTML5で定義されたデータ放送が始まりました。

https://html5experts.jp/yosssi/3527/

この頃、やっとWeb技術者もTV側に関わる機会増えるんじゃないかと思っていろいろ動いてみたりしてたんですが、abemaTVが好調そうな今、改めて「CMSと動画コンテンツ管理」を考えてみてもいいのかな、と思った次第です。concrete5で、TVみたいなコンテンツを管理したい。ドキュメントを管理するCMSとしてはあまりメリットを感じなくなってきたので。

という事で、画面構成とか構造のあり方を模索していた途中、動画もスライドショーできるものないかな？と思って探したら見つかったのが「Vegas Background SlideShow」です。

全画面背景プラグインはいろいろあるものの、動画ファイル（mp4 / webm /OVG形式が行ける模様）もOK。その上、各コンテンツのフェードやアニメーション、オーバーレイが多数用意されているという優れモノのjQueryプラグインです。

導入はいたって簡単。公式サイトからJS群をダウンロードし、jQueryと併せて組み込んだら、

<script src="[PATH]/jquery.min.js"></script>
<script src="[PATH]/js/vegas/vegas.min.js"></script>
<link rel="stylesheet" href="[PATH]/js/vegas/vegas.min.css">

スライドショーの設定をScriptで記述。

<div id="example">
$("#example, body").vegas({
    slides: [
        { src: "[PATH]/img/slide1.jpg" },
        { src: "[PATH]/img/slide2.jpg" },
        { src: "[PATH]/img/slide3.jpg" }
    ]
});
</div>

slideでしている画像に一括で表示時間やフェード、オーバーレイなどを設定する場合は、こちらの説明を参考に

$("#example, body").vegas({
    slides: [
        { src: "[PATH]/img/slide1.jpg" },
        { src: "[PATH]/img/slide2.jpg" },
        { src: "[PATH]/img/slide3.jpg" },
        delay: 7000,
        transition: 'blur',
        overlay: '[PATH]/js/vegas/overlays/01.png'
    ]
});

とすればよいし、時間とオーバーレイは個別で、という場合は

$("#example, body").vegas({
    slides: [
        { src: "[PATH]/img/slide1.jpg",
          delay: 3000,
          overlay: '[PATH]/js/vegas/overlays/01.png' },
        { src: "[PATH]/img/slide2.jpg",
          delay: 5000,
          overlay: '[PATH]/js/vegas/overlays/02.png' },
        { src: "[PATH]/img/slide3.jpg",
          delay: 7000,
          overlay: '[PATH]/js/vegas/overlays/03.png' }
    ]
    transition: 'blur'
});

とすれば、それぞれで動きを変えられます。素敵。

ちなみに動画で試したところ、ファイル容量や再生時間が長いと、読み込みでエラーとなって表示されないことがあるので注意が必要なようですが…。