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

Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし)を追加したい。所謂ウォーターマーク(透かし)処理を行いたい。調べたところ「videojs-logo」というプラグインを利用することで実装できる模様。以下にサンプルと実装方法をメモ。

videojs-logo

GitHub

https://github.com/tapioca24/videojs-logo/tree/master

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/videojs-logo@latest/dist/videojs-logo.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-logo@latest/dist/videojs-logo.css">

異なるバージョンを使用したい場合は以下から探す。

https://www.jsdelivr.com/package/npm/videojs-logobrand

サンプル

https://taitan916.info/sample/Video.js/plugin/videojs-logo/

動画プレイヤーの右上にロゴ画像が表示されている筈。

利用方法

ソースコード

<div style="max-width: 480px;">
    <video id="video_1" class="video-js vjs-16-9"></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 src="https://cdn.jsdelivr.net/npm/videojs-logo@latest/dist/videojs-logo.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-logo@latest/dist/videojs-logo.css">
<script>
const player = videojs('video_1',{
    autoplay: false, // 自動再生
    loop: false, // ループ再生
    controls: true, // コントロール制御表示
    preload: 'auto', // 読み込み制御
});
player.src({
    type: 'video/mp4', // mimetype
    src: '../../test.mp4' // ビデオファイルパス 
});

//ロゴ設定
player.logo({
    image: './logo.png', //ロゴ画像
    fadeDelay: null, //ロゴのフェードアウトの時間(nullの場合はフェードアウト無し)
    opacity: 0.8, //透明度
});
</script>

オプション設定について

設定可能なオプション設定についてはこちらのページを参照。