https://github.com/tapioca24/videojs-logo
A video.js plugin to display a logo image on the player. If you think it's good, give me a star! :star:
https://github.com/tapioca24/videojs-logo
branding video videojs
Last synced: 12 months ago
JSON representation
A video.js plugin to display a logo image on the player. If you think it's good, give me a star! :star:
- Host: GitHub
- URL: https://github.com/tapioca24/videojs-logo
- Owner: tapioca24
- License: mit
- Created: 2019-10-28T08:12:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-26T05:24:17.000Z (over 3 years ago)
- Last Synced: 2025-06-08T18:47:46.355Z (about 1 year ago)
- Topics: branding, video, videojs
- Language: JavaScript
- Homepage: https://tapioca24.github.io/videojs-logo/api/Logo.html
- Size: 2.95 MB
- Stars: 21
- Watchers: 1
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#installation)
- [Usage](#usage)
- [Script tag](#script-tag)
- [ES Modules](#es-modules)
- [CommonJS](#commonjs)
- [TypeScript](#typescript)
- [Configuration](#configuration)
- [Methods](#methods)
- [Compatibility](#compatibility)
- [License](#license)
## Installation
Using npm:
```sh
npm install videojs-logo
```
Using yarn:
```sh
yarn add videojs-logo
```
Using jsDelivr CDN:
```html
```
Using unpkg CDN:
```html
```
## 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][videojs], so that the `videojs` global is available.
```html
var player = videojs('my-video');
player.logo({
image: 'my_logo.png'
});
```
### 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.
```js
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.
```js
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.
```ts
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
| Property | Attributes | Type | Default value | Description |
| ----------- | ------------ | ------------ | ------------- | ---------------------------------------------------------------------------------------------------- |
| **image** | **Required** | **String** | | **The URL to the logo image.** |
| url | Optional | String | | A url to be linked to from the logo. If the user clicks the logo the link will open in a new window. |
| position | Optional | String | "top-right" | The location to place the logo (top-left, top-right, bottom-left, or bottom-right). |
| offsetH | Optional | Number | 0 | Horizontal offset (px) from the edge of the video. |
| offsetV | Optional | Number | 0 | Vertical offset (px) from the edge of the video. |
| width | Optional | Number | | The width of the logo image (px). If not specified, it will be the width of the original image. |
| height | Optional | Number | | The height of the logo image (px). If not specified, it will be the height of the original image. |
| padding | Optional | Number | 5 | Padding around the logo image (px). |
| fadeDelay | Optional | Number, Null | 5000 | Time until fade-out begins (msec). If `null` is specified, automatic fade-out is not performed. |
| hideOnReady | Optional | Boolean | false | Do not show the logo image when the player is ready. |
| opacity | Optional | Boolean | 1 | The opacity of the logo (from `[0, 1]`). If not specified, it will default to 1. |
## Methods
You can also manually show / hide the logo image at any time.
```js
// To show the logo image on the player's play event:
player.on('play', () => {
player.logo().show();
});
```
| Method | Description |
| ------ | ------------------- |
| show() | Show the logo image |
| hide() | Hide the logo image |
## Compatibility
videojs-logo vs video.js
| videojs-logo | video.js |
| ------------ | -------- |
| v3.x | v8.x |
| v2.x | v7.x |
## License
MIT. Copyright (c) tapioca24
[videojs]: http://videojs.com/