WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)チャンネルで切り替える動画ギャラリーの作成方法(クリックで動画停止機能付き)

movie_ch_main

動画ギャラリーをスライダーみたいに表示させるだけならyoutube対応のjQueryスライダーで十分ですが、どうしてもHTML5のVideoタグを使って動画ギャラリーを作ってほしいという依頼がありました。

結果どうしたかというと、jQueryのタブ切り替え機能を使って無理やり設置しました。
ですが、普通のタブ切り替えでは、再生中に別の動画を見ようとすると、先に見ていたほうが垂れ流しで停止されません。音声が付いている場合は重複して流れるので、具合が悪いです。

そんな訳で今回は・・・

  • ・複数の画像を一つのBOXで表示させる動画ギャラリー
  • ・別の動画を見れば、先に見ていた動画は停止する。
  • ・jQueryプラグインのスライダーのような派手な画像の切り替わりはいらない。
  • ・けど、現在どの動画を見てるかわかるようにしたい

この4つを目標にしたいと思います。

まずは映像の切り替えるタブメニューを作成

タブ切り替えは以前に書いたエントリーの「スマホでも実装可能なサイズ可変型タブパネル」とほぼ同じです。

【HTML】

<div id="movie_tab">
<ul class="tabs movie_ch">
  <li id="tab1" class="tab active stopVideo"><a href="#cont1">1ch</a></li>
  <li id="tab2" class="tab stopVideo"><a href="#cont2">2ch</a></li>
  <li id="tab3" class="tab stopVideo"><a href="#cont3">3ch</a></li>
  <li id="tab4" class="tab stopVideo"><a href="#cont4">4ch</a></li>
  <li id="tab5" class="tab stopVideo"><a href="#cont5">5ch</a></li>
</ul>
<div class="panels">
    <div id="cont1" class="panel active movie_Box">
      <video controls poster="firstframe.jpg" width="640" height="480">
        <source src="sample_mov/sample01.mp4">
        <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
        </video>
    </div><!-- /#cont1 -->
    <div id="cont2" class="panel movie_Box">
            <video controls poster="firstframe.jpg" width="640" height="480">
        <source src="sample_mov/sample02.mp4">
        <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
        </video>
    </div><!-- /#cont2 -->
    <div id="cont3" class="panel movie_Box">
      <video controls poster="firstframe.jpg" width="640" height="480">
        <source src="sample_mov/sample03.mp4">
        </video>
    </div><!-- /#cont3 -->
    <div id="cont4" class="panel movie_Box">
      <video controls poster="firstframe.jpg" width="640" height="480">
        <source src="sample_mov/sample04.mp4">
        <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
        </video>
    </div><!-- /#cont4 -->
    <div id="cont5" class="panel movie_Box">
      <video controls poster="firstframe.jpg" width="640" height="480">
        <source src="sample_mov/sample05.mp4">
        <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
        </video>
    </div><!-- /#cont5 -->
</div><!--.panels-->
</div><!--#movie_tab-->

【Javascript】※映像の切り替え用のタブ展開

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
  $(".tabs a").on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    if (! $(target).length) return false;
    $('.tab', $(this).closest('.tabs')).removeClass('active');
    $(this).closest('.tab').addClass('active');
    $('.panel', $(target).closest('.panels')).removeClass('active');
    $(target).addClass('active');
  });
});
</script>

【CSS】

#movie_tab{
  width: 680px;
  height: 550px;
  background:red;
  position: relative;
}
.tabs > .tab {
  display: inline-block;
}
.panels > .panel {
  display: none;
}
.panels > .panel.active {
  display: block;
}
ul.movie_ch{
  position: absolute;
  overflow: hidden;
  bottom:15px;
  left:15px;
}
ul.movie_ch > li{
  width: 50px;
  height: 25px;
  margin-left: 5px;
  background-color: #000;
  text-align: center;
  line-height: 25px;
  font-size: 18px;
  border: 1px solid #fff;
}
ul.movie_ch > li:first-child{
  margin-left: 0;
}
ul.movie_ch > li a{
  width: 42px;
  height: 25px;
  display: block;
  color: #fff;
}
ul.movie_ch > .tab.active{
  background-color: red;
}
.movie_Box{
  padding:15px 15px 0 15px;
}
.movie_Box p{
  font-size: 1.2em;
  margin-top: 5px;
  padding:0 5px;
}

これで、動画を切り替れるようになりますが、このままでは動画の再生がストップされないので、音声が垂れ流し状態です。

別の動画を再生すると、現在流れてる動画がストップ

上記スクリプトを追記すればOKです。
ポイントとしては、6行目の「.stopVideo」とチャンネルのリストにつけてるclass名を同じにして関連付けるってところでしょうか。

【Javascript】※チャンネルを変えると映像をストップさせる命令

<script>
$(document).ready(function() {
    var toggleVideo = function(button) {
        $('video').trigger(button);
    }
    $('.stopVideo').on('click', function(){
        toggleVideo('pause');
    });
    $(window).resize(function(){
        adjustVideo();
    });
});
</script>

DEMO

例えば、長尺の動画をチャプター分けして一つの場所でチャンネルを切り替えたい時とかに使えたりしますが、同時にVideoタグで動画を読み込みすぎると表示速度が心配になります。
ストリーミング機能のある動画再生プレイヤーで使用するのが一番かもしれませんが、どうしてもHTML5のVideoタグでギャラリーを作りたい場合は有効ですかね?今回は以上です。

画像のスライダー系のエントリーは多いんですが、動画となると途端に情報量が少なくなります。まぁ、ほとんどの動画はYoutubeであげれるし、動画系SNS対応のスライダーも多いし、動画専門のサイトはそういうシステムもともと組まれてるから個人ブログのアウトプットの場としては少ないのはしょうがないですね?えっ?Youtubeにあげれない系の動画なのかって・・・?ご想像にお任せしますm(_ _)m

今回動画を使わせてもらったサイト

自作プロフィールビデオ&エンドロール用の無料動画素材 | Lab01

※結婚式系のムービーを作るときに重宝します。また製作依頼も安めに受けているので、テンプレートに気に入ったのがあれば、受注してみるのもアリですね(・∀・)

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ