Neapolitan Pizza Margherita

    videojs-yt-style

    0.1.8 • Public • Published

    videojs-yt-style

    WARNING: Highly early project. The stable version of this project has not been released (Release v1.0.0) and should not be used in production.

    VideoJS Skin like YT.

    Demo

    This is a component to connect other supported VideoJS plugins and use to make the VIdeoJS like YT. We also improve some original VideoJS experience.

    Connect to other VideoJS Plugin (Checked means support, unchecked means it will be supported in the future):

    And more (You can tip me on Issues).

    Table of Contents

    Installation

    npm install --save videojs-yt-style

    Package out from NPM

    git clone https://github.com/paidless/videojs-yt-style.git
    cd videojs-yt-style
    npm install
    npm run build-offline

    Now you can take build/ out to anywhere.

    Usage

    To include videojs-yt-style 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.

    <script src="//path/to/video.min.js"></script>
    <script src="//path/to/videojs-yt-style.min.js"></script>
    <script>
      var player = videojs('my-video');
    
      player.ytStyle();
    </script>

    Browserify/CommonJS

    When using with Browserify, install videojs-yt-style via npm and require the plugin as you would any other module.

    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-yt-style');
    
    var player = videojs('my-video');
    
    player.ytStyle();

    RequireJS/AMD

    When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

    require(['video.js', 'videojs-yt-style'], function(videojs) {
      var player = videojs('my-video');
    
      player.ytStyle();
    });

    Added Features

    Bezel

    Show a bezel bar in player.

    Added Component

    • BezelText : bezel text element
    • BezelTextWrapper : bezel text wrapper element
    • Bezel : Control the whole bezel action

    Added Component Method

    You can call following method like: player.getChild('Bezel').something();.

    • getChild('Bezel').display(string) : Show specific text 0.5s

    Fps

    Add the fps attributes to player.

    Added Player Attributes

    • fps_.fps (Type: Integer) : evaluated video fps
    • fps._certainty (Type: Integer) : evaluate certainty

    Added Player Methods

    • fps(value) (Return type: Integer) : return the evaluated video fps

    Added Player Events

    • fpsupdate : evaluate fps updated

    Keep timetooltip in seekbar

    Add a player option to keep time tooptip in seeb bar.

    Original this PR.

    Added Player Options

    • keepTimeTooltipInSeekBar (Type: Boolean) : Prevents the time tooltip overflow the seek bar

    Progress bar padding

    Add a component to progress bar, use it to grow user can hover the progress bar size.

    You can use the .vjs-progress-bar-padding css class to set the style.

    Size property

    Add some css var of player size.

    Added CSS Variables

    • --player-width (Unit: Pixel) : player width
    • --player-height (Unit: Pixel) : player height

    Subtitle Manager

    A better way to control subtitle.

    Added Player Attributes

    • subtitles : This is a subtitle manager instance, you can found all method in source src/js/components/subtitle-manager.js.

    Keep volume

    Keep volume setting in localStorage.

    Full window mode

    Include is only full window and fullwindow toggle manager.

    Added Player Options

    • alwaysEnableFullWindow (Type: Boolean) : Always has are full window button.

    Added Player Methods

    • isOnlyFullWindow() (Type: Boolean) : Check if only full window is supported.

    Get duration correctly

    Add player method to fix live source can not get duration problem.

    Added Player Methods

    • getDuration() (Type: Number) : Get source duration.

    Fix progress

    Fix VideoJs ProgressBar is slow when dragging with Mouse. problem: https://github.com/videojs/video.js/issues/4460

    Code from: https://github.com/Pong420/videojs-plus/blob/ca74ddceb696ee53fdf934391ca9113e04e93a91/source/Components/ControlBar/Progress/Progress.js

    License

    UNLICENSED. Copyright (c) Ami-OS <grizzltty.app@gmail.com>

    Install

    npm i videojs-yt-style

    DownloadsWeekly Downloads

    11

    Version

    0.1.8

    License

    UNLICENSED

    Unpacked Size

    274 kB

    Total Files

    75

    Last publish

    Collaborators

    • ami-os