背景、全画面で動画を再生。BigVideo.js #jQuery

Advertisement

bigvideo いつかきっと使うメモ

今回の記事は以下から

How To Build a Fullscreen Background Video Player | Vandelay Design Blog
About the Author: @jakerocheleauJake’s Google+ profile.

より詳しく、技術的に読みたい方は今すぐGOです(記事は一応チュートリアルで全文英語です)

jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。

<script type="text/javascript">
$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('動画.mp4');
});
</script>

プレイリストとして動かす時は
BV.show(['動画1.mp4','動画2.mp4','動画3.mp4']);
            $('.playlist-links').on('click', function(e) {
                e.preventDefault();
                BV.show($(this).attr('href'));
と、リンクとして
        <li><a href="動画1.mp4" class="playlist-links">動画1</a></li>
        <li><a href="動画2.mp4" class="playlist-links">動画2</a></li>
        <li><a href="動画3.mp4" class="playlist-links">動画3</a></li>
と貼る形です。

デモとダウンロードは以下からも可能です。

bigvideo.js


ちょっとだけ気になるのはWin右クリックとかでコンテキストメニューに[一時停止]とかコントローラー表示されちゃうところ。IE6(IE Testerですけど)でも走りましたよ。その場合はFlashなのでコンテキストメニューはFlashPlayerのヤーツです。あとやはり動画なのでページ表示速度は気になりますね。