A video.js plugin to display a logo image on the player.

• Abundant customization options
• TypeScript support

If you think it's good, give me a star! ⭐

• Installation
• Usage
  • Script tag
  • ES Modules
  • CommonJS
  • TypeScript
• Configuration
• Methods
• Compatibility
• License

Using npm:

npm install videojs-logo

Using yarn:

yarn add videojs-logo

Using jsDelivr 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">

Using unpkg CDN:

<script src="https://unpkg.com/videojs-logo@latest/dist/videojs-logo.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/videojs-logo@latest/dist/videojs-logo.css">

To include videojs-logo on your website or web application, use any of the following methods.

This is the simplest case.
Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<!-- include stylesheets -->
<link href="//path/to/video-js.min.css" rel="stylesheet">
<link href="//path/to/videojs-logo.css" rel="stylesheet">

<!-- include scripts -->
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-logo.min.js"></script>

<!-- initialize videojs-logo -->
<script>
  var player = videojs('my-video');

  player.logo({
    image: 'my_logo.png'
  });
</script>

Install videojs-logo via npm and import the plugin as you would any other module.
You will also need to import the stylesheet in some way.

import videojs from 'video.js';

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
import 'videojs-logo';
import 'videojs-logo/dist/videojs-logo.css';

const player = videojs('my-video');

player.logo({
  image: 'my_logo.png'
});

Install videojs-logo via npm and require the plugin as you would any other module.
You will also need to import the stylesheet in some way.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-logo');
require('videojs-logo/dist/videojs-logo.css);

var player = videojs('my-video');

player.logo({
  image: 'my_logo.png'
});

When using with TypeScript, you can use the VideoJsLogo namespace.

import videojs, { VideoJsLogo } from 'video.js';
import 'videojs-logo';
import 'videojs-logo/dist/videojs-logo.css';

const player = videojs('my-video');

const options: VideoJsLogo.Options = {
  image: 'my_logo.png'
};
player.logo(options);

You can also manually show / hide the logo image at any time.

// To show the logo image on the player's play event:
player.on('play', () => {
  player.logo().show();
});

videojs-logo vs video.js

MIT. Copyright (c) tapioca24