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>
オプション設定について
設定可能なオプション設定についてはこちらのページを参照。
関連記事
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...
-
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...
-
Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法
Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...