1.0.75 • Published 1 year ago

star-video-time-slider v1.0.75

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

Introduce:

video-time-slider是一个基于原生js打造的视频回放时间轴组件,本组件适用于任何框架。 image text

demonstration

打开demo.html就可以直接演示操作了。

打包发布

参考资料

打包

npx webpack --mode development

发布

npm publish

Install:

npm install video-time-slider --save

Usage:

const timeSliderInstance = initTimeSlider(el,config)

React Hook:

import {useEffect} from 'react';
import initTimeSlider from 'video-time-slider';
function App() {
  useEffect(()=>{
    initTimeSlider('#timeSlider',{
      curDaytimeChunkArray:['012200-023000-C','002200-003000-B','001200-002000-A','000000-001000-A'], // 时间段
      presentSeconds:20,// 当天开始播放秒数
      timeChunkType:{ // 时间段类型
        A:'red',
        B:'yellow',
        C:'blue'
      },
      speed:1, // 速度
      isInitialPlay:true, // 是否初始化后进行播放
     })
  })
  return (
    <>
     <div id='timeSlider'></div>
    </>
  );
}
export default App;

Vue3:

<script setup lang="ts">
import initTimeSlider from 'video-time-slider';
import { nextTick } from 'vue';
nextTick(()=>{
  initTimeSlider('#timeSlider',{
      curDaytimeChunkArray:['012200-023000-C','002200-003000-B','001200-002000-A','000000-001000-A'],
      presentSeconds:20,
      timeChunkType:{
        A:'red',
        B:'yellow',
        C:'blue'
      },
      speed:1,
      isInitialPlay:true,
  })
})
</script>
<template>
   <div id='timeSlider'></div>
</template>

Script:

<script src="../dist/main.js"></script>
<script>
initTimeSlider('#timeSlider',{
  curDaytimeChunkArray:['012200-023000-C','002200-003000-B','001200-002000-A','000000-001000-A'],
  presentSeconds:20,
  timeChunkType:{
    A:'red',
    B:'yellow',
    C:'blue'
  },
  speed:1,
  isInitialPlay:true,
 })
</script>

config:

参数描述类型可选值默认值
curDaytimeChunkArray当天的时间块,每一项格式为startTime-endTime-typeArray必填--
presentSeconds开始播放时间,这个时间为秒数,而且必须在curDaytimeChunkArray时间段内number必填--
timeChunkType时间段类型,属性名为类型与curDaytimeChunkArray对应,属性值为渲染到时间轴上的颜色object必填--
speed时间线滚动的速率number--1
isInitialPlay是否初始化后进行播放,如果设置为false,可以调用实例的timeLinePlay进行播放boolean--false

Method(instance):

setTimeLineLeft

外部控制时间线移动时调用。

instance.presentSeconds = 30; // 设置时间线的时间
instance.setTimeLineLeft()   // 设置时间线的位置

回调方法

playNext

播放下一个视频回调方法。这里主要设置下一个视频播放的url地址

    /**
     * 播放下一段视频
     * @param {*} event 
     */
    playNext(event){
      const detail = event.detail;
      const index = detail.index;
	  // 设置下一个视频播放地址	
      this.videoSrc = this.recordList[index].src
      this.instance.curChunkPlayFinish = false
    },

setCurrentPlayTime

版本 1.0.0

  • 第一版本
  • 支持时间轴精度调整
  • 支持时间线滚动跳动以及判断时间线移动的移动位置的合理性
  • 支持以时间线为中心进行缩放时间轴
  • 支持不同类型的时间段
  • 支持时间轴的点击和拖动
1.0.73

1 year ago

1.0.72

1 year ago

1.0.71

1 year ago

1.0.70

1 year ago

1.0.75

1 year ago

1.0.74

1 year ago

1.0.62

1 year ago

1.0.66

1 year ago

1.0.65

1 year ago

1.0.64

1 year ago

1.0.63

1 year ago

1.0.69

1 year ago

1.0.68

1 year ago

1.0.67

1 year ago

1.0.61

2 years ago

1.0.60

2 years ago

1.0.59

2 years ago

1.0.58

2 years ago

1.0.57

2 years ago

1.0.56

2 years ago

1.0.55

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.0.49

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.40

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.34

2 years ago

1.0.33

2 years ago

1.0.32

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago