Question

我正在React.js中制作一个视频播放器我正在尝试使用同步到视频制作自定义搜索栏，但我的搜索功能无法正常工作，而用户拖动时看到这个GIF.Seek栏没有响应用户运动它回到起源位置。希望这个Gif能帮助你找出问题

我的反应代码。

    import React, {Component} from 'react'
import './index.css'

class SampleVideo extends Component{
    state = {
        play:false,
        pause:false,
        onHover:false,
        isMouseDown:false,
        seekedPercentage:"0%"
    };
    componentDidMount(){
        this.video.addEventListener('timeupdate', this.updateProgressBar, false);
    }
    updateProgressBar = () => {
        let percentage = Math.floor((100 / this.video.duration) * this.video.currentTime);
        this.setState({
            seekedPercentage:`${percentage}%`
        });
    };
    handleVideoPausePlay = () => {
      return this.state.play ? this.pause() : this.play();
    };
    play = () => {
        this.video.play();
        this.setState({
            play:true,
            pause:false
        })
    };
    pause = () => {
        this.video.pause()
        this.setState({
            play:false,
            pause:true
        })
    };
    handleSeek = e => {
        if(this.state.isMouseDown){
            console.log("Dragginf")

            let vid_duration = e.nativeEvent.offsetX / this.seek.offsetWidth;
            let percentage = vid_duration * 100;
            this.video.currentTime = vid_duration * this.video.duration;

            this.setState({
                seekedPercentage:`${percentage}%`
            })

        }else {
            console.log('i don;t Move ')
        }
    };
    handleMouseDown = e => {
        this.setState({ isMouseDown:true })
    };
    handleMouseUp = e => {
        this.setState({ isMouseDown:false });
    };
    render(){
       // console.log(this.state);
        return(
            <div className="container">
                <div onMouseEnter={e => this.setState({onHover:true})} onMouseLeave={e => this.setState({ onHover:false })} className="video-wrapper">
                    <video ref={(c) => this.video = c} width="100%" height="100%" controls muted={true}>
                        <source src="vid/test.MKV" type="video/mp4" />
                        <source src="vid/test.MKV" type="video/ogg" />
                        Your browser does not support the video tag.
                    </video>

                    { this.state.onHover ?  <div className="video-controls-container">
                        <div className="vid-title">
                        </div>
                        <div className="vid-control">
                            <div className="vid-seekbar">
                                <div ref={s => this.seek = s} onMouseUp={this.handleMouseUp} onMouseDown={this.handleMouseDown} onMouseMove={this.handleSeek}  className="video-seek-bar">
                                    <div style={{width:this.state.seekedPercentage}} className="videobarlevelbar">
                                    </div>
                                    <div className="seekControl">
                                        <div className="seekImage"><img src="/css/0d20f779-fd6f-49e2-903a-aed7380a00a2.webp" alt="dsvds" /></div>
                                        <div className="seekRound" />
                                    </div>
                                </div>
                            </div>
                            <div className="vid-mini-controller">
                                { !this.state.play ? <div onClick={this.handleVideoPausePlay} className="play-btn">
                                    <svg height="32px" style={{enableBackground: 'new 0 0 24 32'}} version="1.1" viewBox="0 0 24 32" width="24px" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><g id="Layer_1" /><g id="play"><polygon points="0,0 24,16 0,32  " style={{fill: '#fff'}} /></g></svg>
                                </div> : <div onClick={this.handleVideoPausePlay} className="pause-btn">
                                    <svg height="32px" id="svg2" width="32px" version="1.1" viewBox="0 0 32 32" xmlSpace="preserve">
                                        <g id="background">
                                            <rect height="32" width="32" fill="none"/>
                                        </g>
                                        <g id="pause">
                                            <g>
                                                <rect fill="#fff" height="24" width="8" x="20" y="4"/>
                                                <rect fill="#fff" height="24" width="8" x="4" y="4"/>
                                            </g>
                                        </g>
                                    </svg>
                                </div> }



                            </div>
                        </div>
                    </div> : "" }





                </div>
            </div>
        )
    }
}

export default SampleVideo

Answer 1

我刚刚尝试了没有css部分的代码，并且在使用默认html5播放器的视频上运行正常。它是否适用于视频或您是否有同样的问题？您可以发布您的CSS，以便我可以尝试一下吗？

我的自定义Seek Bar无法正常运行HTML5？

1 个答案: