0
私はReact.jsでビデオプレイヤーを作っていますビデオと同期してカスタムシークバーを作ろうとしていますが、ユーザーのドラッグがGIF.Seekバーを見ている間にシークが正しく動作していませんバック原点position.Hopeに行くこのGIFは、あなたが問題カスタム作成したシークバーが正しく動作していませんHTML5は適切ですか？
私はコードに反応を識別するのに役立ちます。
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