videojs-preview-thumbnails
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.
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
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
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