vue 视频时间进度条组件-使用npm组件

帅帅的记忆

已于 2022-03-30 09:01:50 修改

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html 百度前端

于 2022-03-29 17:32:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44994731/article/details/123826938

vue 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一款基于Vue的自定义视频时间进度条组件，适用于视频流播放场景。该组件支持时间戳输入，并提供了点击回调功能以获取点击时刻的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 视频时间进度条组件
有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24h的时间组件

在这里插入图片描述

在这里插入图片描述
组件已上传到npm上，npm i as-time-line下载安装即可，最少需要1.2.0版本
https://www.npmjs.com/package/as-time-line
1，安装

npm i as-time-line -S

2，引用，在vue里面的main.js中引入，添加代码如下

import timeLine from "as-time-line";
import "as-time-line/lib/timeline.css";

如下一个main.js 样例

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
import timeLine from "as-time-line";
import "as-time-line/lib/timeline.css";
Vue.use(timeLine);
new Vue({
  render: (h) => h(App),
}).$mount("#app");

3，使用
dateArr 是一个数组，存放的是一个开始时间和结束时间的时间戳，就是getTime()


 <time-line
          ref="timeLienRef"
          :colorVal="'#000000'" 
          @handleClickTimeLineFn="handleClickTimeLineFn"
          :dateArr="dateArr"
        ></time-line>



// handleClickTimeLineFn  获取点击的时间
handleClickTimeLineFn(date) {
      console.log("date==", date);
   
    },