how to play/pause video in React without external library?

Question

I have a video tag () in my webpage, and a \"play/pause\" button that when the user clicks on it, the video starts/stops playing . How can I do so in react if I\'m not allowed t

Answer 1

Accepted answer was using old react style, if you want to do with ES6

A simple component to auto play pause along with manual controls playing Polestar intro:

    import React from "react";
    class Video extends React.Component {
      componentDidMount = () => {
        this.playVideo();
      };

      componentWillUnmount = () => {
          this.pauseVideo();
      };


      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 = () => {
        return (
          

            
        );
      };
    }

 export default Video;

Video from https://www.polestar.com/cars/polestar-1