Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法
以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる記事を書いたが、Video.jsでも同じようなことを実装したい。また、再生終了以外に再生開始時のタイミングでも何らかのアクションを実行したい。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/Video.js/action_hook/
再生開始時と終了時にアラートが表示される筈。
実装方法
ソースコード
<div class="video_div"> <video id="video" class="video-js"></video> </div> <script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet"> <script> const option = { autoplay: false, //自動再生 loop: false, //ループ controls: true, //コントローラー表示 preload: 'auto', //ビデオデータのダウンロードをすぐに開始するかどうか notSupportedMessage: '動画再生できません', //再生不可の際のメッセージ aspectRatio: '16:9', controlBar: { remainingTimeDisplay: { displayNegative: false, //残再生時間を正数で表示 }, }, }; const player = videojs('video', option); player.src({ type: 'video/mp4', src: '../test.mp4', }); let start_flg = false; let end_flg = false; //再生開始時のアクション player.on('play', function(){ if( !start_flg ){ alert('再生開始'); start_flg = true; } }); //再生終了時のアクション player.on('ended', function(){ if( !end_flg ){ alert('再生終了'); end_flg = true; } }); </script>
解説等
再生開始時及び終了時のアクションはフラグ(start_flg / end_flg)等で制御しないと都度実行される点に注意。具体的には「再生開始→再生終了→シークバーで戻す→再度再生開始→再生終了」と操作した場合に再生開始・終了のアクションがそれぞれ2回ずつ実行されてしまう。
関連記事
-
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...
-
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法
YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaSc ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...