用于IVR視頻回播的時間選擇插件，刻度尺的實現參考了vue語法css實現刻度尺，為項目微信小程序制作。基于uni-app開發。目前沒找到類似的插件，所以才動手實現了一個，是不是做視頻的同行太少了，還是你們太低調了_。

其實這個可以做成前端通用組件的，因為本人項目只在微信小程序使用此插件，就先做成小程序版本了，其它平臺沒試過，但是估計都能用。

和 live-player 配合使用，播放視頻挺流暢的。

功能

• 24小時刻度尺，30分鐘分隔
• 有錄像的時間段在刻度尺上標識（支持多個時間段）
• 回傳刻度無錄像時間段時間值、刻度有錄像時間段時間值（用于接口獲取播放視頻）
• 目前刻度尺返回值精確到秒
• 自動回滾最后有錄像時間段

效果圖

有錄像的時間段在刻度尺上標識（支持多個時間段）實現思路

（純粹記錄下，怕自己忘記了，肯定會忘記的）

傳參是以時間段的方式，每段錄像的開始時間、結束時間為一組。以開始時間、結束時間在刻度尺上的位置，渲染一段帶顏色的view，就能實現多個時間段在刻度尺上的標識。

代碼實現思路

處理渲染用的開始時間、結束時間數組，形成新的時間段，每個時間段由以下3個元素組成：

1、開始時間位置距（0點）距離，這里代號a

以0點為原點，找到開始時間在刻度尺上的位置，算法在utils.js文件的dateToGrid方法里。難點主要是24小時刻度尺上px長度和真實時間之間的轉換。

t1算出開始時間的位置在刻度尺上占多少px格子，然后乘每個格子的寬度，就得到開始時間位置距原點距離poi

let poi = t1 * this.single

2、時間段在刻度尺上的長度，這里代號b

t2算出結束時間的位置在刻度尺上占多少px格子，t2減t1就是時間段在刻度尺上的長度len了。

let len = (t2-t1).toFixed(2) * this.single

3、結束時間距（0點）的距離，這里代號c

這個有2種算法：

• 1、開始時間位置poi加時間段長度len

let left = poi + len

• 2、計算結束時間位置距開始時間（0點）距離

let left = t2 * this.single

頁面渲染

<view class="scale-active">
    <view class='scale-active-time' v-for="(it, idt) in newActiveTime" :key="idt" :style="{marginLeft: idt>0?newActiveTime[idt][0]-newActiveTime[idt-1][2] + 'px':newActiveTime[idt][0] + 'px'}">
        <view class="scale-active-item" :style="{width: it[1] + 'px'}" />
    </view>
</view>

scale-active-time

主要是定位時間段開始渲染的位置。

• newActiveTime[idt][0] + ‘px’

第一個時間段開始渲染的位置就是a

• newActiveTime[idt][0]-newActiveTime[idt-1][2] + ‘px’

>0的時間段，用下一個時間段的開始時間位置a減去上一個時間段結束時間位置c，就可以得到下一個時間段開始渲染的位置

scale-active-item

每個時間段view的寬度width

以上，就是時間刻度尺上標識帶錄像時間段的思路了。

使用

頁面引入

import videoTimeSlider from '@/uni_modules/video-time-slider/components/video-time-slider/video-time-slider.vue'

頁面調用

<video-time-slider :curDate="2021-11-29"
    :activeTime="[['01:12', '03:43'],['05:22', '07:33'],['12:02', '17:39']]" 
    @value="curValue"
    @active-value="activeValue" />

export default {
    components: {
        videoTimeSlider
    },
    data() {
        return {
            curVal: '00:00'
        };
    },
    methods: {
        curValue(msg) {
            this.curVal = msg
        },
        activeValue(msg) {
            console.log(666, msg)
        }
    }
};

具體看例子

參數說明

參數名	默認值	說明
curDate	2021-11-24	日期
activeTime	[]	時間段，標識可播放錄像
styles	{…}	自定義卡尺樣式

style選項

參數名	默認值	說明
line	#dbdbdb	刻度顏色
bginner	#fbfbfb	前景色顏色
bgoutside	#dbdbdb	背景色顏色
lineSelect	#ea3639	選中線顏色
fontColo	#404040	刻度數字顏色
fontSiz	12	字體大小

方法說明

事件名稱	說明	返回參數
@value	刻度無錄像時間段時間值	時間值字符串
@active-value	刻度有錄像時間段時間值	時間值字符串

版本要求

• 微信 App iOS 最低版本要求：6.5.21 。
• 微信 App Android 最低版本要求：6.5.19。
• 小程序基礎庫最低版本要求：1.7.0。

注意

如果微信開發者工具報以下錯誤

TypeError: Cannot read property 'forceUpdate' of undefined

manifest.json文件配置下微信小程序的AppID就行了，不用在意

總結

已上插件市場 video-time-slider

市場上的代碼可能會忘記更新，具體看代碼了，github上的代碼是最新的 video-time-slider