勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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回ずつ実行されてしまう。

 - JavaScript

  関連記事

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)

Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...

Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...