videojs-logo v3.0.0

videojs-logo

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! :star:

Table of Contents

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

Installation

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

Usage

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

Script tag

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>

ES Modules

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'
});

CommonJS

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'
});

TypeScript

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);

Configuration

Methods

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();
});

Compatibility

videojs-logo vs video.js

License

MIT. Copyright (c) tapioca24