How to Play Video in React

Video is a great way of capturing the user's attention. And it's no secret they're becoming more popular on modern websites.

Good video not only captures visitors' attention but also improves the user experience.

In this article, you'll learn the basics of playing videos in a browser. And how to play a video in React from various sources, including:

• Local video
• Remote URL
• Youtube

But first, let's talk about the basics.

How to Use HTML Video Element

In order to show videos on any website, we need to use native HTML video element.

HTML Video Element is a tag that is used to embed videos from sites such as YouTube, Vimeo, or other video sites. It can be used for a wide range of purposes. Starting from simple tutorials to sophisticated marketing campaigns.

It's possible to customize the video element to fit your needs. By specifying video properties you can achieve results like:

• Playing video automatically
• Muting video sounds
• Looping video

To display a video, it's necessary to specify:

• src of the video
• type of the video

The minimal video example, using pure HTML would look like the following.

<video>
    <source src="/video-example.webm" type="video/webm" />
    <source src="/video-example.mp4" type="video/mp4" />
    Sorry, your browser doesn't support videos.
</video>

Now that you learned how to use video in plain HTML, it's time to also look at the React implementation.

Playing Video in React

To play video in React, you need to use the HTML video element, specify a source of the video and its type. Along with these required attributes, you can provide additional properties to customize the video player.

The simple React example of video will look like the following.

Video.jsx

const Video = () => {
  return (
    <video controls width="100%">
      <source src="/video-example.webm" type="video/webm" />
      <source src="/video-example.mp4" type="video/mp4"
      />
      Sorry, your browser doesn't support videos.
    </video>
  );
};

export default Video;

Now that we know how to play video in React, let's look at the various use cases. We'll cover things like:

• Playing video from URL
• Playing video from Youtube
• Uploading and playing local video

Playing Video From URL

The following example assumes you have a video URL hosted on some website, and you'd like to play it on your website.

In order to play a video from the URL in React, you need to obtain the URL of a video, and specify it as a source of the video element.

Playing video from URL

// 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation.
// Hosted by archive.org.
const src =
  "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4";

const Video = () => {
  return (
    <video controls width="100%">
      <source src={src} type="video/mp4" />
      Sorry, your browser doesn't support embedded videos.
    </video>
  );
};

export default Video;

Playing Video From Youtube

The easiest way to play videos from Youtube in React is to use Youtube embed videos.

To obtain the code snippet, you can follow the instructions in the video below.

Playing video from Youtube

const src = "https://www.youtube.com/embed/d15DP5zqnYE";

const Video = () => {
  return (
    <iframe
      width="560"
      height="315"
      src={src}
      title="Youtube Player"
      frameborder="0"
      allowFullScreen
    />
  );
};

export default Video;

Playing Local Video

In this section, we're gonna look at playing videos that you have stored on your disk. This is by far the most challenging task, but it's not impossible. It just requires some additional work.

In order to play local video in React, you need to first upload the video file. Once the file is uploaded, you need to transform it into a playable URL by using Javascript.

Now that we know what is needed, let's have a look at the code. We'll have a file input that can be used to upload a video. Once the video is uploaded, we use createObjectURL to transform it into Blob URL.

Playing local video

import { useState } from "react";

const Video = () => {
  const [src, setSrc] = useState("");

  const handleChange = (event) => {
    try {
      // Get the uploaded file
      const file = event.target.files[0];

      // Transform file into blob URL
      setSrc(URL.createObjectURL(file));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <video src={src} controls width="100%">
        Sorry, your browser doesn't support embedded videos.
      </video>
      <input type="file" onChange={handleChange} />
    </>
  );
};

export default Video;

The example above uses Blob URL to create a source for the video.

Popular React Video Libraries

It's good to know how to configure video element. And how to play a video in React.

However, if you're in a rush. And if you'd like to use preconfigured video player for React, you have multiple options.

React Player

When it comes to playing video in React, React Player seems to be the most popular choice.

A React component for playing a variety of URLs. It supports file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. (source: React Player)

React Youtube

As the title suggests, this is a React component specifically designed to play Youtube videos.

Simple React component acting as a thin layer over the YouTube IFrame Player API. (source: React Youtube)

Plyr React

Not as popular as React Player, but still a popular option for playing videos in React.

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo. (source: Plyr React)

Concluding Thoughts

I think videos are a perfect way to share information. And I also believe we'll see more and more videos popping up on modern websites. After all, they're known to be a great improvement to the user experience.

As a web developer, it's important to know the basics of the HTML video element. It's good to know how to configure it, and it's important to know how to play various types of videos on your website.

In this article, you learned how to play various types of video in React. They include:

• Playing video from external URL
• Playing video from Youtube
• Playing video from local disk

With all the things you learned, it's time to experiment and start using videos in your React websites.