简介
vue-video-mark 是一个基于 Vue.js 的视频标注组件，可以帮助开发者在前端页面中方便地为视频添加标注。
安装
通过 npm 安装：
npm install vue-video-mark --save
使用
引入组件
-- -------------------- ---- ------- ---------- ----- ------ -------------- ------------------------ -------------------- --------- ----------- ------------- ------------------- --------------------- ---------------- --------------------------- -------------- ------ ----------- -------- ------ --------- ---- ---------------- ------ ------- - ----------- - --------- -- ---- -- - ------ - ----------- ---- ------------ ---- ------- - - ----- --- -- ---- -- ---- ------ -------- -- - ----- --- -- ---- -- ---- ------ --------- - - - -- -------- - --------- -- - ------------------------------------------------ -- ------------ ------- - ----------------------- - - - ---------传入视频信息
video-mark组件需要知道视频的宽度和高度，以及视频中每个标注的位置和时间。可以通过绑定属性来传入这些信息。- width: 视频的宽度，默认值为 640
- height: 视频的高度，默认值为 360
- points: 标注数组，每个标注对象包含以下属性：
- time: 标注出现的时间，单位为秒
- x: 标注相对于视频宽度的横向位置，取值范围为 0-1
- y: 标注相对于视频高度的纵向位置，取值范围为 0-1
- label: 标注文本内容
设置视频
在视频可以播放前，
video-mark无法获取视频的实际宽度和高度。因此需要在视频可以播放时，调用setVideo方法将视频传入组件。onCanPlay () { this.$refs.markRef.setVideo(this.$refs.videoRef) }处理标注点击事件
当标注被点击时，会触发
point-click事件。通过监听该事件，可以响应用户的操作。onPointClick (point) { console.log(point.time) }
示例代码
完整示例代码如下：
-- -------------------- ---- -------
----------
-----
------
--------------
------------------------
--------------------
---------
-----------
-------------
-------------------
---------------------
----------------
---------------------------
--------------
------
-----------
--------
------ --------- ---- ----------------
------ ------- -
----------- - --------- --
---- -- -
------ -
----------- ----
------------ ----
------- -
-
----- ---
-- ----
-- ----
------ --------
--
-
----- ---
-- ----
-- ----
------ ---------
-
-
-
--
-------- -
--------- -- -
------------------------------------------------
--
------------ ------- -
-----------------------
-
-
-
---------结语
vue-video-mark 可以帮助开发者在前端页面中方便地为视频添加标注。通过阅读本文，你了解了该组件的基本用法和注意事项。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b4bc6eb7e50355dbfed