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

Related searches

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 to use js in order to call "getElementById" and then to use play()/pause() build-in methods. Any idea?

The most straightforward way would be to use refs which is a React feature that will let you invoke methods on the component instances that you have returned from a render().

You can read up a little more on them in the docs: https://facebook.github.io/react/docs/more-about-refs.html

In this case just add a ref string to your video tag like so:

<video ref="vidRef" src="some.mp4" type="video/mp4"></video>

That way when you add click handlers to your buttons:

<button onClick={this.playVideo.bind(this)}>PLAY</button>

The playVideo method will have access to your video reference through refs:

playVideo() {
  this.refs.vidRef.play();
}

Here is a working DEMO so you can check out a full example.

how to play/pause video in React without external library?, 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 � React Native Video does not provide the inbuilt controls to play /Pause or Seek the video as they have provided the props for the full access. If you are interested to design your own controls then your welcome else you can use a supporting library called react-native-media-controls. It provides you all the functional controls which you need for a standard video player.

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 (
          <div>
            <video
              ref="vidRef"
              src="https://assets.polestar.com/video/test/polestar-1_09.mp4"
              type="video/mp4"
            />

            <div>
              <button onClick={this.playVideo}>
                Play!
              </button>
              <button onClick={this.pauseVideo}>
                Pause!
              </button>
            </div>
          </div>
        );
      };
    }

 export default Video;

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

how to play/pause video in React without external library?-漫漫字节 , 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 � The url of a video or song to play Can be an array or MediaStream object: playing: Set to true or false to pause or play the media: false: loop: Set to true or false to loop the media: false: controls: Set to true or false to display native player controls. For Vimeo videos, hiding controls must be enabled by the video owner. false: light

Updated example for React Function Components:

import React, { useRef} from 'react'

function myComponent(props) {
  const vidRef = useRef(null);
  const handlePlayVideo = () => {
    vidRef.current.play();
  }
  return (
    <video ref={vidRef}>
      <source src={[YOUR_SOURCE]} type="video/mp4" />
    </video>
  )
}


react-player, The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control� Video-React is a web video player built from the ground up for an HTML5 world using React library. to play back as soon as it can do so without stopping to finish

Player, a web video player built from the ground up for an HTML5 world using React library. Player. Player is the root component of the Video-React player. All the others the video automatically begins to play back as soon as it can do so without autoPaused, Returns whether the player has been paused by the player itself. This library is created with the purpose to implement recyclerview with videos easily. It is targeted at solving following problems: Flicker when scrolling. Lag or skipping frames when video starts. OutOfMemory errors. And it has following features: Auto-play videos when in view. Auto-pause videos when not in view or partially in view. Mute/Un

Video-React, Video-React is a web video player built from the ground up for an HTML5 world using React library. Video-React is a web video player built from the ground up for an HTML5 world using React library.

For instance, a video Web Component might expose play() and pause() functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

The WPF library provides the MediaElement control that encapsulates the Windows Media Player functionality. The MediaElement tag in XAML allows you to play videos in XAML and WPF. The Source attribute of the tag takes the full path of the video. The following code snippet uses the MediaElement to display a video.

Comments
  • Cool. There is any option to call playVideo() from button that is part of other component?
  • Yep. You can pass the function references down to any child component through props, as you would any parent-child methods. I updated the demo to use two separate components for the video & the buttons to illustrate.
  • yes, but what if both classes (buttons and Video) are children of mutual parent?
  • It's generally very good practice to keep a unidirectional data flow in React applications, as it makes situations like this (along with most others) easy to reason about and work with. So my first suggestion would be to consider refactoring. You can still technically do this with refs by giving your video component a ref='videoComponent' then moving the play/pause to the mutual parent & invoking those methods through this.refs.videoComponent.refs.vidRef.play() / .pause(). But as you can see that's starting to get a little crazy.
  • @BradColthurst I'm not sure I understand the case. Is this it? <Parent><Video><video/></Video><Buttons><button></Buttons></Parent> Then, you can this.vidRef = React.createRef() in Parent component. Pass it to Video via props. Attach it to video element in Video's render method via ref attribute. And pass Parent's onButtonClick method to Buttons component via props, attach it to button for click event (via onClick attr). Then in Parent's onButtonClick method we can do this.vidRef.play(). Am I missing something?