動画ギャラリー(K)チャンネルで切り替える動画ギャラリーの作成方法(クリックで動画停止機能付き)HOMEJavascript(K)チャンネルで切り替える動画ギャラリーの作成方法(クリックで動画停止機能付き)動画ギャラリーをスライダーみたいに表示させるだけならyoutube対応のjQueryスライダーで十分ですが、どうしてもHTML5のVideoタグを使って動画ギャラリーを作ってほしいという依頼がありました。結果どうしたかというと、jQueryのタブ切り替え機能を使って無理やり設置しました。普通のタブ切り替えでは、再生中に別の動画を見ようとすると、先に見ていたほうが垂れ流しで停止されません。音声が付いている場合は重複して流れるので、具合が悪いです。別の動画を見れば、先に見ていた動画は停止する。jQueryプラグインのスライダーのような派手な画像の切り替わりはいらない。現在どの動画を見てるかわかるようにしたいこの4つを目標にしたいと思います。映像の切り替えるタブメニューを作成タブ切り替えは以前に書いたエントリーの「スマホでも実装可能なサイズ可変型タブパネル」とほぼ同じです。<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。5px;}これで、動画を切り替れるようになりますが、このままでは動画の再生がストップされないので、音声が垂れ流し状態です。別の動画を再生すると、現在流れてる動画がストップ上記スクリプトを追記すればOKです。ポイントとしては、6行目の「.stopVideo」とチャンネルのリストにつけてるclass名を同じにして関連付けるってところでしょうか。});});</script>DEMO例えば、長尺の動画をチャプター分けして一つの場所でチャンネルを切り替えたい時とかに使えたりしますが、同時にVideoタグで動画を読み込みすぎると表示速度が心配になります。ストリーミング機能のある動画再生プレイヤーで使用するのが一番かもしれませんが、どうしてもHTML5のVideoタグでギャラリーを作りたい場合は有効ですかね?今回は以上です。画像のスライダー系のエントリーは多いんですが、動画となると途端に情報量が少なくなります。Lab01※結婚式系のムービーを作るときに重宝します。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。