Naughty Push Message

    videojs-logo
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.6 • Public • Published

    videojs-logo

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

    • Abundant customization options
    • TypeScript support

    video-js-logo-sample

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

    Table of Contents

    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

    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.

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

    License

    MIT. Copyright (c) tapioca24

    Install

    npm i videojs-logo

    DownloadsWeekly Downloads

    748

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    36.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • tapioca24