react 视频回放时间轴滚动条

最新推荐文章于 2024-06-11 10:04:23 发布

程序媛廿一

最新推荐文章于 2024-06-11 10:04:23 发布

阅读量290

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_61341069/article/details/131431204

版权

import React, { useEffect, useState } from 'react'
import styles from './index.less'

import moment from 'moment'
import { getHours, showTime } from './utils'
type timeProgressBarProps = {
    beginTime: string;
    endTime: string;
    getBeginTime: (time: string) => void

}
var beginLineX: any
var timesArrs: Array<{ lable: string; value: string, num: string }> = []
const timeProgressBar: React.FC<timeProgressBarProps> = (props) => {
    const [times, setTimes] = useState<Array<{ lable: string; value: string, num: string }>>([])
    const [nowTime, setNowTime] = useState<string>()
    const { beginTime, endTime, getBeginTime } = props
    const changeTime = () => {
        let div = document.getElementById("timesBox")!
        div.addEventListener('scroll', function (event) {
            // 在此处执行滚动条拖动事件的处理逻辑
            let beginLine = document.getElementById("beginLine")!
            beginLineX = beginLine.getBoundingClientRect().left - 190
            let endX = beginLine.getBoundingClientRect().left
            timesArrs.map((item, i) => {
                let timesItemX = document.getElementById("timesItem" + i)?.getBoundingClientRect().left!
                if (timesItemX >= beginLineX && timesItemX <= endX) {
                    let allS = parseInt(((timesItemX - beginLineX - 190) / 190) * 3600 as any)
                    let lastTime = item.lable + ':' + showTime(allS)
                    setNowTime(lastTime)
                    getBeginTime(lastTime)
                }

            })


        });
    }
    function getTimeArray() {
        let allTimeHours: any = moment(endTime).diff(
            moment(beginTime),
            "hours"
        ) / 24;
        let videoHours = getHours(moment(endTime).diff(
            moment(beginTime),