Skip to main content
Version: 7.1.1

Getting started with React

There is a sample app using THEOplayer as a React component available on our Github.

Project setup​

git clone https://github.com/THEOplayer/samples-react-js.git

Creates a local clone of the project

npm install

Installs the necessary dependencies. This project was bootstrapped with Create React App. You can learn more in the Create React App documentation.

npm start

Compiles and runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

Creating and using a component​

src/THEOplayerWrapper.js​

is an example implementation of a React Component that wraps the THEOplayer.js module. You can extend this wrapper to support whatever THEOplayer API that you want to use.

src/App.js​

uses the Player component exported by THEOplayerWrapper.js and specifies a source for the player to play.

Going to Production​

The THEOplayer library provided in this sample is currently targeted to the latest version and is set to run on localhost only

Getting a license​

To run THEOplayer in production you will need a valid THEOplayer HTML5 SDK set up to run on your domain. You can use your existing license or get one for free on THEOportal.

Updating the project​

You will need to update some files that reference the THEOplayer.js and THEOplayer.css files:

  • src/THEOplayerWrapper.js, -- Please replace the URL of the libraryLocation to the URL or folder where your THEOplayer files (THEOplayer.js, THEOplayer.d.js, etc.) are residing.
  • src/App.js
  • public/index.html -- Please replace the links to the THEOplayer assets with your own URLs.