MediaPlayer

# 自定义进度条提示点

# 演示

# 安装

npm i @lin-media/highlight

# 初始化

import MediaPlayer from "@lin-media/player";
import Highlight from "@lin-media/highlight";
MediaPlayer.use(Highlight);

const highlightList = [
  {
    time: 20,
    text: "这是第 20 秒"
  }
];
const player = new MediaPlayer({
  // ...
  Highlight: {
    // 点击跳转到提示点的时间点，默认true
    jump: true,
    // 显示点击的提示点的文本，默认true
    showTip: true
    // 提示点列表，直接通过options参数传入，或者调用set()
    list:highlightList
  }
});

// 或者通过 `player.highlight.set()` 设置。
player.highlight.set(highlightList);

// 销毁提示点
player.highlight.destroy();

// 监听提示点点击事件
player.$on("highlight-click", (item) => {
  console.log(item);
});

# Highlight 参数

提示

Highlight 参数设置为 false 可关闭插件功能

参数 说明 类型 可选值 默认值
jump 点击是否跳转到提示点的时间点，可选 boolean — true
showTip 是否显示点击的提示点的文本，可选 boolean — true
list 提示点列表，格式见下方，可选 Array — —

# list 参数格式

字段 说明 类型
time 时间点 number
text 显示文本 string

# 事件

事件名称 说明 回调参数
highlight-click 点击提示点的时候触发 event

# API

  • player.highlight.set(list:Array) : 设置提示点列表

  • player.highlight.destroy() : 销毁提示点