jQueryでvideo操作を行う時のポイント
トップページで動画を利用するサイトをよく見かけるようになりました。今回はjQueryでvideoタグ(動画)を操作する際のポイントについて記載しようと思います。以下のような処理を実装します。
・複数動画を違和感なく連続で再生させる。
・クリックしたら再生停止、再度クリックしたら再生を再開
なお、Webサイトで動画利用時はサイズなど検討の上ご利用ください。処理速度の遅いスマホやタブレットでは遅延したり、またサイズの大きい動画は当然ダウンロードにも時間がかかります。
1.videoタグの操作について(例：再生処理)
まずは、jQueryでのvideoタグの操作についてです。
◆HTML
1 | <video id="video1" src="./mv/top01.mp4" poster="./mv/mov_thumbnail01.jpg" muted playsinline></video> |
上記のHTML文をそれぞれ、JavaScriptで再生処理を記載した場合、jQueryで再生処理を記載した場合のサンプルコードについてです。
(1)JavaScript
1 2 | const videoElement = document.getElementById('video1'); videoElement.play(); |
(2)jQuery
表現方法としては2種類あります。
1 2 3 4 | //例1 jQuery('#video1').get(0).play(); //例2 jQuery('#video1')[0].play(); |
jQueryのオブジェクトでは、配列のような形式で要素を取得するため、このような形になります。
2.複数の動画を連続で再生させる場合
【ポイント】
・再生完了イベント(ended)を起点に処理を実装する。
・つなぎ目を違和感なくするため、サムネイル画像を入れる。(poster属性)
・フェードインを入れる。
◆HTML
1 2 3 4 5 6 7 | <div class="video-sample-inner"> <video id="video1" src="./mv/top01.mp4" poster="./mv/mov_thumbnail01.jpg" muted playsinline class="video_ctl_class"></video> <video id="video2" src="./mv/top02.mp4" poster="./mv/mov_thumbnail02.jpg" muted playsinline class="video_ctl_class"></video> <video id="video3" src="./mv/top03.mp4" poster="./mv/mov_thumbnail03.jpg" muted playsinline class="video_ctl_class"></video> <video id="video4" src="./mv/top04.mp4" poster="./mv/mov_thumbnail04.jpg" muted playsinline class="video_ctl_class"></video> <video id="video5" src="./mv/top05.mp4" poster="./mv/mov_thumbnail05.jpg" muted playsinline class="video_ctl_class"></video> </div> |
この後、処理を追加するためclass=”video_ctl_class”を入れています。
◆CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .video-sample-inner { width:100%; max-width:500px; height:auto; position:relative; margin:0 auto; } .video-sample-inner video{ width:100%; height:auto; position:absolute; top:0; left:0; display:none; } |
こちらのCSSは５つの動画を同じ領域に表示しています。
◆jQueryのサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | jQuery(window).on('load', function() { jQuery('#video1').get(0).play(); jQuery('#video1').fadeIn(500); }); jQuery(document).ready(function($){ jQuery('#video1').on('ended', function() { jQuery('#video2').get(0).play(); jQuery('#video2').fadeIn(500); jQuery('#video3').hide(); jQuery('#video4').hide(); jQuery('#video5').hide(); jQuery('#video1').fadeOut(); }); jQuery('#video2').on('ended', function() { jQuery('#video3').get(0).play(); jQuery('#video3').fadeIn(500); jQuery('#video1').hide(); jQuery('#video4').hide(); jQuery('#video5').hide(); jQuery('#video2').fadeOut(); }); jQuery('#video3').on('ended', function() { jQuery('#video4').get(0).play(); jQuery('#video4').fadeIn(500); jQuery('#video1').hide(); jQuery('#video2').hide(); jQuery('#video5').hide(); jQuery('#video3').fadeOut(); }); jQuery('#video4').on('ended', function() { jQuery('#video5').get(0).play(); jQuery('#video5').fadeIn(500); jQuery('#video1').hide(); jQuery('#video2').hide(); jQuery('#video3').hide(); jQuery('#video4').fadeOut(); }); jQuery('#video5').on('ended', function() { jQuery('#video1').get(0).play(); jQuery('#video1').fadeIn(500); jQuery('#video2').hide(); jQuery('#video3').hide(); jQuery('#video4').hide(); jQuery('#video5').fadeOut(); }); }); |
画面のロード完了(loadイベント)時に最初の動画(#video1)を再生させ、以降はended(再生終了)イベントをきっかけにそれぞれ順番に動画を再生しています。
これで違和感なく再生ができると思います。
3.動画クリックで再生停止／再生再開を実装
せっかくなので、次に動画をクリックしたら再生停止し、もう一度クリックされたら再生再開を行う処理を追加してみます。以下です。
◆jQueryのサンプルコード
1 2 3 4 5 6 7 8 9 | jQuery(document).ready(function($){ jQuery(".video_ctl_class").click(function (){ if(jQuery(this)[0].paused){ jQuery(this)[0].play(); }else{ jQuery(this)[0].pause(); } }); }); |
全てのvideoタグにclass=”video_ctl_class”をつけているので、動画がクリックされたら当該イベントを受けた要素のオブジェクトを使って動画を再生しているなら停止し、停止されているなら再生する処理を追加しています。
4.実際の動画再生処理
実際に実装した動画です。(cssでcursol:pointer;を付けています。)
クリックすると再生が停止し、もう一度クリックすると再開します。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
