Quick Tip: Build a Video Player Component in React

Bruno Mota
Bruno Mota
Share

In this quick tip, we’re going to create a React video component. This will enable you to define a list of videos and allow your visitors to cycle between them. The component will support Vimeo, YouTube and Dailymotion but you can easily extend it to support other video providers.

By way of a dev environment we’ll use react-hot-boilerplate which comes with hot reloading enabled. This means we can build our component and see the results immediately in the browser, without refreshing the page every time the code changes.

You can find the source code on our GitHub repo, as well as a demo at the bottom of the article.

Starting from a Boilerplate

We’ll start by setting up our working environment from a boilerplate. Assuming you have git installed on your machine, let’s clone the repo by running:

git clone https://github.com/gaearon/react-hot-boilerplate

This will create a folder react-hot-boilerplate in the directory we’re at. Let’s now navigate to that folder and install dependencies by running:

cd react-hot-boilerplate
npm install

Next, we’ll need to install querystring which we’ll be using later on.

npm install --save query-string

Finally, we can kick things off with:

npm start

If things have gone according to plan, the message Listening at localhost:3000 will appear in the prompt. Webpack will still need to process the files before being able to serve them. After some delay, a sequence of operations should appear in the prompt, ending with webpack: bundle is now VALID, which means everything is ready to go.

By navigating to http://localhost:3000/ in the browser you should now be able to see ‘Hello, world.’ displayed.

Creating the Component

The first thing to do is to create the component file at src/social-video.js. For now the minimal code needed for the component to work and some dummy render content will suffice.

import React, {Component} from 'react';

export default class SocialVideo extends Component {
  render() {
    return (
      <h1>Social Video</h1>
    );
  }
}

Next, in src/App.js, let’s create a list of videos that we can cycle between using Next and Previous buttons.

import React, { Component } from 'react';
import SocialVideo from './social-video';

var videos = [
  {
    service: 'youtube',
    video: 'https://www.youtube.com/watch?v=XxVg_s8xAms'
  },
  {
    service: 'vimeo',
    video: 'https://vimeo.com/151715092'
  },
  {
    service: 'dailymotion',
    video: 'http://www.dailymotion.com/video/x3oc771_la-voiture-du-futur_tech'
  }
];

export default class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      videoIndex: 0
    };
  }

  goToVideo (index) {
    let videoIndex = index;
    if (videoIndex < 0) {
      videoIndex = videos.length - 1;
    } else if (videoIndex >= videos.length) {
      videoIndex = 0;
    }
    this.setState({
      videoIndex
    });
  }

  render() {
    const {service, video} = videos[this.state.videoIndex];
    return (
      <div>
        <SocialVideo service={service} video={video} width={500} height={270} />
        <p>
          <span>{service}: </span>
          <span>{video}</span>
        </p>
        <button onClick={this.goToVideo.bind(this, this.state.videoIndex - 1)}>
          Previous
        </button>
        <button onClick={this.goToVideo.bind(this, this.state.videoIndex + 1)}>
          Next
        </button>
      </div>
    );
  }
}

There’s nothing too fancy going on here. We’re defining an array with data about the videos we want to switch between. In the App state we’re saving the position in the array that indicates which video is selected. We’re also displaying information about the selected video and rendering our SocialVideo component. For now the component doesn’t do much, so we need to get to it.

We’ll be passing the video information as props to the SocialVideo component and using that information to render the appropriate content. The component won’t have any state of its own. This will make it reusable and predictable, meaning same input equals the same output every time. Here’s the completed component. If you’re following along at home, be sure to have your browser open when you save the file and watch the UI update automatically.

import qs from 'query-string';
import React, {Component, PropTypes} from 'react';

export default class SocialVideo extends Component {
  static propTypes = {
    service: PropTypes.oneOf(['youtube', 'vimeo', 'dailymotion']).isRequired,
    video: PropTypes.string.isRequired
  };

  static urlMap = new Map([
    ['youtube', 'http://www.youtube.com/embed/'],
    ['vimeo', 'https://player.vimeo.com/video/'],
    ['dailymotion', 'http://www.dailymotion.com/embed/video/']
  ]);

  getIdFromVideoString (vString) {
    const urlArr = vString.split('/');
    const idString = urlArr[urlArr.length - 1];
    const queryParams = qs.extract(vString);

    return (queryParams && qs.parse(queryParams).v) || idString || '';
  }

  render() {
    const {service, video, ...htmlTags} = this.props;
    const src = `${SocialVideo.urlMap.get(service)}${this.getIdFromVideoString(video)}`;

    return (
      <iframe
        src={src}
        frameBorder='0'
        webkitAllowFullScreen
        mozallowfullscreen
        allowFullScreen
        {...htmlTags}
      />
    );
  }
}

Let’s break this down. As you might have noticed we’re including our query-string dependency. This will be used to parse the videos URLs we send to the component.

The component requires two props, which are defined in propTypes:

  • service — the video provider
  • video — the video URL or ID

Now let’s see what we’re doing in the render function. We start with:

const {service, video, ...htmlTags} = this.props;

What we’re doing here is destructuring the props to get the service and video values, then assigning any remaining props that may have been passed to the component to the variable htmlTags.

We now need to process the service and video variables to generate a src variable that we’ll use to create an <iframe> tag. That’s what the following code does:

const src = `${SocialVideo.urlMap.get(service)}${this.getIdFromVideoString(video)}`;

Here we’re generating a string starting with the default embed URL which is obtained from a static property called urlMap. The second part of the string consists of the video ID, which is generated by calling the function getIdFromVideoString.

Now we have calculated the src variable, we just need to render it to an <iframe>:

return (
  <iframe
    src={src}
    frameBorder='0'
    webkitAllowFullScreen
    mozallowfullscreen
    allowFullScreen
    {...htmlTags}
  />
);

Note how we’re passing htmlTags preceded by the spread operator (...), so that if extra props are sent to the component, such as: className, style, width, height, etc., they get inserted into the <iframe> tag. This makes the component more customizable and dynamic.

We can now see our component playing the selected video at http://localhost:3000/. This is also shown in the following demo.

See the Pen XXQrKG by SitePoint (@SitePoint) on CodePen.

Conclusion

In this quick tip I’ve shown you how to make a React video component which allows your users to cycle between a list of videos. We used the react-hot-boilerplate to jump start our dev environment and saw hot reloading in action. The component didn’t have any state of its own, which makes it reusable and predictable (in so far as the same input equals the same output every time). The goal of this quick tip was not only to show you how to specifically build this component, but also to promote good practices whilst doing so.

Is this something you would use? Would you have built it differently? I’d love to hear from you in the comments below.

Frequently Asked Questions (FAQs) about Video Player Component in React

How Can I Customize the Video Player in React?

Customizing the video player in React is possible and quite straightforward. You can modify the player’s appearance and functionality by using the ‘props’ in the Video-React library. For instance, you can change the player’s width and height, autoplay feature, muted state, and more. You can also add custom controls and event listeners to enhance the user experience. Remember, the key to customization lies in understanding the properties and methods available in the library.

Can I Play Multiple Videos Simultaneously in React?

Yes, you can play multiple videos simultaneously in React. You can achieve this by creating multiple instances of the Video Player component, each with a unique source. However, keep in mind that playing multiple videos at the same time might affect the performance and user experience, especially on devices with limited resources.

How Can I Add Subtitles or Captions to My Video Player in React?

Adding subtitles or captions to your video player in React can be done using the ‘tracks’ property. You can add an array of track objects, each containing the kind of track (subtitles or captions), the source of the track file, the language, and a label. This feature is particularly useful for making your videos accessible to a wider audience.

How Can I Handle Errors in the Video Player Component?

Error handling in the Video Player component can be done using the ‘onError’ event listener. This function is triggered when the video cannot be loaded for any reason, such as network errors or unsupported formats. You can use this function to display a custom error message or to perform other actions when an error occurs.

Can I Use the Video Player Component in a Mobile Application?

Yes, you can use the Video Player component in a mobile application. React is a cross-platform framework, which means you can use it to develop both web and mobile applications. However, keep in mind that the user experience and performance might vary depending on the device and network conditions.

How Can I Control the Playback Rate of the Video?

Controlling the playback rate of the video can be done using the ‘playbackRate’ property. You can set this property to any positive decimal number, where 1.0 is the normal speed, 0.5 is half speed, and 2.0 is double speed. This feature is useful for allowing users to watch videos at their own pace.

Can I Stream Live Videos Using the Video Player Component in React?

Yes, you can stream live videos using the Video Player component in React. You can achieve this by setting the ‘src’ property to the URL of the live stream. However, keep in mind that live streaming requires a stable and fast network connection, and the supported formats might vary depending on the browser and device.

How Can I Add a Poster Image to the Video Player?

Adding a poster image to the Video Player can be done using the ‘poster’ property. You can set this property to the URL of the image you want to display before the video starts playing. This feature is useful for giving users a preview of the video content.

Can I Play Videos from Different Sources in the Same Player?

Yes, you can play videos from different sources in the same player. You can achieve this by setting the ‘sources’ property to an array of source objects, each containing the source URL and the type of the video. The player will automatically select the most suitable source based on the browser and network conditions.

How Can I Loop a Video in the Video Player Component in React?

Looping a video in the Video Player component can be done using the ‘loop’ property. You can set this property to ‘true’ to make the video start over again every time it ends. This feature is useful for creating background videos or for displaying short clips that need to be repeated.