CODEWITHSUNDEEP
javascripthtmlreactjsvideo
Nuintee
Nuintee

Reputation: 33

How can I prevent refreshing HTML Video element (iFrame as well) on React State Update?

I'm a React noobie.

I'm working on my current project which I use HTML video Element.

I'd like to add chapters to Video by using React state, but when I try, Video Element refreshes and playback location moves to the beginning.

How Can I prevent refreshing Video HTML on React State Update?

Upvotes: 0

Views: 2210

Answers (1)

Mehul Thakkar
Mehul Thakkar

Reputation: 2437

Try creating a separate video component and pass URL as a prop. Wrap that in React.memo. Now that component will re-render only when the URL changes.

const Parent = () => (<div><VideoComponent url={"SOME_URL"}/></div>)


const VideoComponent = React.memo(function MyVideoComponent({url}) {
      // only renders if url have changed!
      return (<video src={url}></video>)
});

Upvotes: 3

Related Questions