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

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-lineref="timeLienRef":colorVal="'#000000'" @handleClickTimeLineFn="handleClickTimeLineFn":dateArr="dateArr"></time-line>// handleClickTimeLineFn  获取点击的时间
handleClickTimeLineFn(date) {console.log("date==", date);},

vue 视频时间进度条组件-使用npm组件相关推荐

vue 视频时间进度条组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...
带进度条的ASP无组件断点续传下载代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%Option Explicit%> <% '= ...
从文件加密到到视频文件进度条播放揭秘
文件加密使用 Cipher CipherInputStream CipherOutputStream 实现对文件的加解密每个文件使用一个秘钥 String aesKey = UUID.random ...
EV录屏/向日葵文件播放没有声音问题，不能拖动时间进度条
环境: EV录屏 4.2.2 potplayer 版本:230523(1.7.21916) 问题: 使用potplayer 播放录屏文件只能从头开始播放,如果拖动时间进度条,要么无法播放,要么没有声音 ...
微信小程序音频或视频拖动进度条时间不变解决方法
问题描述: 微信小程序在较新版本的音频接口中推荐使用InnerAudioContext对象实现音频的播放.暂停.跳转等功能,通过监听接口回调实现. InnerAudioContext.onTimeUp ...
vue 圆形百分比进度条_快速构建一个圆形的进度条
在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载.从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果. 如果我们使用的是开箱即用的解决方案,它为我们提供 ...
VUE“粘性”阅读进度条
这个进度条是网上一个实例,原实例使用jQuery实现的查看,最近在用vue-cli,所以就用vue实现该组件查看. 这个进度条有有意思的地方是:用户的一系列操作都和导航息息相关.一般来说,普通的导航, ...
windows下flv视频网站进度条随意拖放[转]
网站中视频都转换成flv格式,奈何flv格式无法拖拽,此问题纠结了好久,最终得以解决.现将解决思路记录下来,大多数源于网上找到的. 视频拖拽满足要求 1.播放器要支持 2.flv视频要有关键帧和met ...
opencv2/3播放视频实现进度条显示拖动、快进、快退、逐帧播放、显示当前帧于图像
最近在做运动物体跟踪,为了方便调试,需要对视频播放进行控制搜索后发现网上的都是参照<学习opencv>基于opencv1版本的, 故查阅相关资料自己写了一个. 主要功能: void Sh ...

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

vue 视频时间进度条组件-使用npm组件相关推荐

最新文章

热门文章

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

vue 视频 时间进度条组件-使用npm组件相关推荐

最新文章

热门文章

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

vue 视频时间进度条组件-使用npm组件相关推荐