CODEWITHSUNDEEP
htmlreactjs
Atilla
Atilla

Reputation: 69

How to use playbackRate parameter for video element in ReactJS?

I need your help to fix my code.

class header extends Component {
    playVideo() {
        // You can use the play method as normal on your video ref
        this
            .refs
            .vidRef
            .play();
    }

    pauseVideo() {
        // Pause as well
        this
            .refs
            .vidRef
            .pause();
    }
    render() {
        const speed = 10
        return (
            <div className="content">
                <video ref="vidRef" playbackRate={speed} src={Videofilm} type="video/mp4"></video>

                <Buttons
                    playVideo={this
                        .playVideo
                        .bind(this)}
                    pauseVideo={this
                        .pauseVideo
                        .bind(this)}/>
            </div>
        );
    }
}

Anybody can tell me how could i use that parameter for control speed of a video in ReactJS?

Thank you all!

Upvotes: 5

Views: 9390

Answers (2)

ynishi
ynishi

Reputation: 326

If you want to control interactive, you can combine useRef, useState, useEffect.

call stack is below.

onInput -> setPlayback called -> setPlaybackRate called and update playbackRate -> useEffect with playbackRate triggered and videoRef's playbackRate update

code is below(based on Flip, thank you!)

export const Player: React.FC = ( {video} ) => {

  const videoRef= useRef();
  const [playbackRate, setPlaybackRate] = useState(1);

  useEffect(() => {
     videoRef.current.playbackRate = playbackRate;
  }, [playbackRate]);

  const setPlayBack = (e) => {
    setPlaybackRate(e.target.value);
  };

  return (
    <>
        <video ref={videoRef}>
          <source src={video} type="video/mp4" />
        </video>
        <form>
          <input onInput={setPlayBack} type="range" value={playbackRate} min="0.5" max="4" step="0.1" />
        </form>
    </>
  );
}

if you want minimum write code, update videoRef's playbackRate directly in setPlayBack and remove useEffect like,

  const setPlayBack = (e) => {
    setPlaybackRate(e.target.value);
    videoRef.current.playbackRate = playbackRate;
  };

Upvotes: 2

Flip Nickel
Flip Nickel

Reputation: 91

Its really quite a mess around to get this working but read the steps below and check out the code example.

  1. first, you create a Ref for the <video> html element,
  2. then, create a function that updates the ref's playbackRate property (i.e someFunction = () => ref.current.playbackRate = 0.5;)

  3. and lastly, call that function via the <video> html element onCanPlay() event method

    export default function VideoBackground() { const videoRef= useRef(); const setPlayBack = () => { videoRef.current.playbackRate = 0.5; }; return ( <> <video ref={videoRef} onCanPlay={() => setPlayBack()}> <source src={Video} type="video/mp4" /> </video> </> ); }

Upvotes: 8

Related Questions