No Padding Margin

    videojs-sprite-thumbnails-for-videojs6

    0.0.2 • Public • Published

    视频截屏缩略图


    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 每张图片的间隔时间 number 1

    Install

    npm i videojs-sprite-thumbnails-for-videojs6

    DownloadsWeekly Downloads

    2

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    44.2 kB

    Total Files

    22

    Last publish

    Collaborators

    • mraiguo