Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-hook-videojs with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("video.js/package.json"); // video.js is a peer dependency. var reactHookVideojs = require("react-hook-videojs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-hook-videojs v1.0.2

Easy React integration of Video.js using hooks.

react-hook-videojs

Due to how video.js mutates the DOM, integrating video.js with React can be a bit tricky. Especially if you want to support video.js component updates and correctly dispose of any old player.

React Hooks helps us package this quite nicely, and all you have to do to use this package is:

import React from "react";
import useVideoJS from "react-hook-videojs";

const App = () => {
  const videoUrl = "http://techslides.com/demos/sample-videos/small.mp4";
  const Player = useVideoJS({ sources: [{ src: videoUrl }] });
  return (
    <div className="App">
      <Player />
    </div>
  );
};

useVideoJS takes a single options argument, and passes it without modifications to video.js. See their options reference for further information.

Many thanks to Dan Abramov for helping me figure out some issues related to useLayoutEffect and video.js DOM manipulation.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free