Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @my-videojs/videojs-sprite-thumbnails with all npm packages installed. Try it out:

var videojsSpriteThumbnails = require("@my-videojs/videojs-sprite-thumbnails")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@my-videojs/videojs-sprite-thumbnails v0.0.2

Plugin to display thumbnails from a sprite image when hovering over the progress bar.

视频截屏缩略图


videojs播放器展示视频截屏雪碧图插件(videojs6)

何时使用

  • 需要videojs播放器的进度条在hover的时候展示截屏雪碧图的时候

浏览器支持

IE 9+

安装

npm install videojs-thumbnails-sprite-for-videojs6 --save

运行

# 安装依赖
npm install

# 开启服务
npm start

代码演示

基本

为进度条添加单张截屏雪碧图

  var player =  videojs('videojs-sprite-thumbnails-player');
  player.spriteThumbnails({
    interval: 1,
    path: [
      'img/oceans-thumbs.jpg',
    ],
    width: 240,
    height: 100,
  });

多张截屏雪碧图

视频的截屏雪碧图有多张的时候,设置图片path为数组

  var player = videojs('videojs-sprite-thumbnails-player');
  player1.spriteThumbnails({
    path: [
      'img/thumbnail-1.jpg',
      'img/thumbnail-2.jpg'
    ],
    width: 240,
    height: 100,
  });

API

参数说明类型默认值
path截屏雪碧图路径数组,当有多张的时候,按顺序写入Array[]
width雪碧图中每张截屏的宽度number
height雪碧图中每张截屏的高度number
interval每张图片的间隔时间number1
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free