react 视频回放时间轴滚动条

最新推荐文章于 2024-11-20 16:29:37 发布

程序媛廿一

最新推荐文章于 2024-11-20 16:29:37 发布

阅读量494

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_61341069/article/details/131431204

版权

本文详细介绍了如何在React应用中创建一个功能完善的视频回放时间轴滚动条。通过结合JavaScript和React组件，实现对视频播放进度的精确控制，包括拖动调整播放位置、实时显示播放时间和总时长等功能。内容涵盖了组件设计、事件处理和状态管理等方面，为前端开发者提供了一种实现视频播放控制的新思路。

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

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),

最低0.47元/天解锁文章