勉強したことのメモ

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

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテキストの表示位置を〇秒ごとにランダムに変更したい。以前にメモした「videojs-logo」だと表示できるのは画像のみっぽいので他を探してみたところ「videojs-awesome-watermark」が良さそう。以下に利用方法等をメモ。

 

サンプル

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

 

videojs-awesome-watermark

GitHub

https://github.com/fanguitocoder/videojs-awesome-watermark

CDN

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

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

 

利用方法

ソースコード

<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 src="https://cdn.jsdelivr.net/npm/videojs-awesome-watermark@0.0.12/dist/videojs-awesome-watermark.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/videojs-awesome-watermark@0.0.12/dist/videojs-awesome-watermark.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' // ビデオファイルパス
});

const watermark_option = {
    type: 'text',

    intermittent: false,
    hiddenTime: 5,
    visibleTime: 5,
    opacity: 1,

    position: 'random',
    randomPositionSwitchingTime: 3,
    top: '20',
    bottom: null,
    left: null,
    right: '20',

    fontColor: 'white',
    fontSize: '5',
    fontSizeUnit: 'percent',
    text: '透かし文字',

    url: 'https://taitan916.info/blog/',
};
player.awesomeWatermark(watermark_option);
</script>

注意点

キャプチャ(スクリーンショット)対策にはなると思うが、動画自体をダウンロードされると意味はない点に注意。

 - JavaScript

  関連記事

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...