@lin-media/preview v1.0.3

视频缩略图预览

安装

npm i @lin-media/preview

初始化

import MediaPlayer from "@lin-media/player";
import Preview from "@lin-media/preview";
MediaPlayer.use(Preview);

缩略图有 2 中形式，一种是通过列表传入对应时间点的缩略图，另一种是传入整个视频的缩略图地址（这种是可以查看任意时间点的缩略图，但是缩略图必须是完整的）

第一种：

const previewList = [
  {
    time: 40,
    url: "http://xxx/demo1.png"
  },
  {
    time: 80,
    url: "http://xxx/demo2.png"
  }
];
const player = new MediaPlayer({
  // ...
  Preview: {
    // 通过参数传入或者通过setPreview方法设置
    list: previewList
  }
});

// player.preview.setPreview(previewList)

player.$on("preview-click", (item: any) => {
  console.log(item);
});

第二种：

const player = new MediaPlayer({
  // ...
  Preview: {
    // 通过参数传入或者通过setBarView方法设置
    barPreviewUrl: "https://xxx/demo.jpg"
  }
});
// player.preview.setBarView('https://xxx/demo.jpg')

Preview 参数

事件

API

• player.preview.setPreview(list:Array) : 设置时间点缩略图列表

• player.preview.destroyPreview() : 销毁时间点缩略图列表

• player.preview.setBarView(barPreviewUrl:string) : 设置进度条预览

• player.preview.destroyBarView() : 销毁进度条预览

list 格式