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

動画ギャラリーをスライダーみたいに表示させるだけなら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