%20(2).svg)
项目简介
本项目是基于videojs的视频打点插件系统，旨在为视频播放器增添更多功能。支持在视频播放时设置多个标记点，每个标记点可包含自定义内容，还能更新标记点与处理点击事件。项目采用现代化构建工具Vite，支持video.js@7.x版本，具有良好的扩展性和可定制性，方便开发者进行二次开发。
项目的主要特性和功能
- 可在视频播放时设置多个标记点，且标记点位置能动态调整。
- 标记点可包含文字、图片等自定义内容。
- 支持更新已设置的标记点信息，包括位置、内容和点击事件处理函数。
- 提供标记点点击事件处理机制，开发者可执行自定义逻辑。
- 以Vite作为构建工具，支持模块化开发，便于扩展和定制。
- 兼容video.js@7.x版本，可在多种浏览器和设备上运行。
安装使用步骤
前提条件
确保项目中已引入videojs库，若未引入，可通过npm或yarn进行安装。
安装插件
使用npm安装videojs-plugin-marker插件：
bash
npm i @tower1229/videojs-plugin-marker -S
引入文件
在项目的JavaScript文件中引入插件的js和css文件：
javascript
import '@tower1229/videojs-plugin-marker';
import '@tower1229/videojs-plugin-marker/dist/style.css';
初始化插件
在videojs实例中初始化插件并设置标记点信息：
javascript
const player = videojs(this.$refs.videoPlayer, options);
// 设置打点信息
player.markerPlugin({
markers: [
{ offset: 2 }, // 在视频进度的第2秒处设置标记点
],
});
动态操作
可按需动态更新标记点信息或处理标记点的点击事件，如更新标记点信息和添加点击事件处理函数。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】