Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
videojs-thumbnail-sprite
Advanced tools
Readme
Video.js plugin to display preview image of a video at the point of time when hovering on progress bar
<script>
# using npm
npm install --save videojs-thumbnail-sprite
# using yarn
yarn add videojs-thumbnail-sprite
videojs-thumbnail-sprite
uses Video.js as peer dependencies. To use this module, you should manually install those dependencies in your project.
<script>
Just load the module as you want, but you should load video.js
module first, so that the plugin can access previously instantiated global videojs
module reference.
<script src="//path/to/video.js"></script>
<script src="//path/to/videojs-thumbnail-sprite.js"></script>
<script>
var player = videojs('video-id');
player.thumbnailSprite({
sprites: [
{
url: 'https://example.com/video.png',
start: 0,
duration: 10,
interval: 2,
width: 160,
height: 90,
},
],
});
</script>
Simple as previous usage. Just import the module as you want, but you should load video.js
module first, so that the plugin can access previously instantiated global videojs
module reference. Also, **you should import video.js
module as a name of videojs
, as the plugin will assume the name of imported video.js
module as videojs
.
import videojs from 'video.js';
import 'videojs-thumbnail-sprite';
const player = videojs('video-id');
player.thumbnailSprite({
sprites: [
{
url: 'https://example.com/video.png',
start: 0,
duration: 10,
interval: 2,
width: 160,
height: 90,
},
],
});
There is only single property provided currently: sprites
const options = {
sprites: [
{
url: 'https://example.com/video-1.png',
start: 0,
duration: 10,
interval: 2,
width: 160,
height: 90,
},
{
url: 'https://example.com/video-2.png',
start: 10,
duration: 20,
interval: 2,
width: 160,
height: 90,
},
]
}
Option name | Datatype | Default value | Description |
---|---|---|---|
url | string | '' | URL of thumbnail sprite image |
start | number | 0 | Start point of time of the video section that this sprite image is covering |
duration | number | 0 | Duration of the video section that this sprite image is covering |
width | number | 0 | Width of preview thumbnail (px ) |
height | number | 0 | Height of preview thumbnail (px ) |
interval | number | 0 | Interval between each preview thumbnails of the video section that this sprite image is covering |
You can use multiple sprite images in case that preview thumbnails for entire video is divided into several chunks. Just pass them as array of sprites, and the module will handle it on behalf of you.
To make things happen preperly, there are some rules to follow:
duration
of video sections should not overlap each other. For example, if your first sprite image covers [0:00 ~ 10:00] and your second sprite image covers [5:00 ~ 15:00], then there is an overlap between them([5:00 ~ 10:00]). The module will emit warning on browser console if it catches any overlaps.width
and height
should be provided for each sprites. If not, even if the images are loaded those will not be displayed as expected.duration
should be multiple of interval
. From start
point of time, at every interval
seconds, the preview thumbnail will be displayed, so to display corresponding preview with hovering time correctly, follow this rule.Fork the repository, make changes, commit your work, and make Pull Request.
FAQs
Video.js plugin to display preview image of a video at the point of time when hovering on progress bar
The npm package videojs-thumbnail-sprite receives a total of 108 weekly downloads. As such, videojs-thumbnail-sprite popularity was classified as not popular.
We found that videojs-thumbnail-sprite demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.