Skip to main content

Getting Started With WordpressWith ReactJS

Simple usage example​

Global version​

Get started by creating a div on your site where you want the player to be and embed this script into the page

<div id="player_container"></div>
<script src="https://cdn.oberplayer.com/oberplayer.js"></script>

Copy and paste this code onto the page

<script>
  oberplayer(document.querySelector('#player_container')).setup({
    playlist: [
      {
        videoUrl: 'https://cdn.oberplayer.com/fixtures/mp4/bbb_27s_4k.mp4'
      }
    ]
  }).then(() => {
    console.log('Video loaded !');
  })
</script>

Or with await if you prefer 😍

<script>
(async () => {
  await oberplayer(document.querySelector('#player_container')).setup({
  playlist: [
    {
      videoUrl: 'https://cdn.oberplayer.com/fixtures/mp4/bbb_27s_4k.mp4'
    }
  ]
});
})();
</script>

Result​

ES module version Premium option​

The player can be imported and be part of your bundle as well 😍

Your player container
<div id="player_container"></div>
ES module
import oberplayer from "@oberplayer/oberplayer";
(async () => {
  await oberplayer(document.querySelector('#player_container')).setup({
  playlist: [
    {
      videoUrl: 'https://cdn.oberplayer.com/fixtures/mp4/bbb_27s_4k.mp4'
    }
  ]
})();
tip

As setup() returns a Promise and this example uses "await", you have to call it from an async function. For this example, we wrapped it in an async anonymous function.

CommonJS version Premium option​

If, for some reason, you absolutely need the commonJS version.

Your player container
<div id="player_container"></div>
commonJS
const oberplayer =  require('@oberplayer/oberplayer').default;
(async () => {
  await oberplayer(document.querySelector('#player_container')).setup({
  playlist: [
    {
      videoUrl: 'https://cdn.oberplayer.com/fixtures/mp4/bbb_27s_4k.mp4'
    }
  ]
})();
  • Click here to see the configuration reference
  • Click here to see the API configuration reference

How to add Ober Player NPM package to my project ?​

Create a .npmrc file at the root of your project with

@oberplayer:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOURGITHUBTOKEN

Then run

npm i @oberplayer/oberplayer