Nosferatu's Pace Maker

    videojs-preview-thumbnails

    1.0.5 • Public • Published

    videojs-preview-thumbnails

    Build Status

    This is plugin for video.js 7.0 version. The plugin can show preview thumbnails above control progress-bar. very simple for setup , you can open example folder and read index.html file to understand why I said very simple.

    image

    Installation

    $ npm install videojs-preview-thumbnails --save

    How to use

    Browser only for now :

    First Step: Include Jquery and video.js 7+ :

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
    // VideoJS CSS
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">

    Second Step: Include videojs-preview-thumbnails plugin :

    <script src="<node_module_path>/dist/videojs-preview-thumbnails.js"></script>

    Third Step: Setup plugin in player ready function :

    videojs( 'my-player',{
     
      ~ omit videojs setup-data ~
     
      },function () {
     
         this.initialPreviewThumbnail({
             sprite_url:'./output-180x120-thumb.jpg',
                second:6,
                sprite_x_count:15,
                thumbnail_width:180,
                thumbnail_height:120,
                preview_window_border_size:2,
                preview_window_border_color:'green'
        });
        
    });
     

    Below is preview thumbnails setup property information:

        Initial Preview Thumbnail
         * [require] sprite_url : sprite url
         * [require] sprite_x_count : sprite's interval.
         * [require] thumbnail_width : thumbnail's width in sprite.
         * [require] thumbnail_height : thumbnail's height in sprite.
         * second : how many seconds of one thumbnail take in sprite.
         * preview_window_left_offset : window left offset.
         * preview_window_width : window width.
         * preview_window_height : window height.
         * preview_window_top : window top position.
         * preview_window_border_size : window's border size.
         * preview_window_border_color : window's border color.
         * hook_out : mouse-out hook function.
         * hook_move : mouse-move hook function.

    When you incloud this library , you can also use hotkeys plugins , ( specially you can use this to get current player component in keyup and keydown function )

    videojs( 'my-player',{
     
      ~ omit videojs setup-data ~
     
      },function () {
     
      this.hotkeys({
              keyup : function(event){
                 if( event.code=="Space" ) {
                     if( this.paused() ) this.play();
                     else this.pause();
                    }
                },
                keydown : function (event) {
                 if( event.code=="ArrowRight" )this.currentTime(Math.floor(this.currentTime())+10);
                    if( event.code=="ArrowLeft" )this.currentTime(Math.floor(this.currentTime())-10);
                    if( event.code=="ArrowUp" )this.volume(this.volume()+0.1);
                    if( event.code=="ArrowDown" )this.volume(this.volume()-0.1);
                }
             });
     
        });
        
    });
     

    Below is hotkeys setup property information:

        Initial Preview Thumbnail
         * keyup : key-up function
         * keydown : key-down function

    Todos

    • Script for automatically build sprite.

    ##################################################

    Finally enjoy it.

    EricKuo from Chiayi of Taiwan.

    License

    MIT

    Install

    npm i videojs-preview-thumbnails

    DownloadsWeekly Downloads

    12

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    628 kB

    Total Files

    9

    Last publish

    Collaborators

    • erickuo13