CODEWITHSUNDEEP
reactjs
mdash1
mdash1

Reputation: 1115

How can I use a client side library (video.js) with react?

Hi i'm trying to use video.js (see http://videojs.com/) as a videoplayer, and the docs say to add:

"<link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">"

and 

 "<script src="//vjs.zencdn.net/5.19/video.min.js"></script>"

to my application. How can I use this in react?

Also, in my public/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
    <title>Digitizing POC</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    <script src="//vjs.zencdn.net/5.19/video.min.js"></script>
  </body>
</html>

Video component:

componentDidMount() {
    let that = this;
    let player = videojs('my-player', options, function onPlayerReady() {
          this.on('canplay',()=>{
            console.log("can play)";
          })         
    });  

}



Error in browser: 
Failed to compile
/src/components/videoplayer.js
  Line 41:  'videojs' is not defined  no-undef

Upvotes: 0

Views: 874

Answers (1)

koolkat
koolkat

Reputation: 846

Include the link in your React app's index.html

EDIT: index.html:

<head>
    <link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/5.19/video.min.js"></script>
</head>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
return (<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
   </p>
  </video>
  );
}

ReactDOM.render(<App />, document.querySelector('.container'));

Upvotes: 1

Related Questions