Video.js with markers in a React TypeScript


To implement Video.js with markers in a React TypeScript project, you can follow these steps:

1. **Install Dependencies:**

   Make sure you have the necessary packages installed. Install `video.js` and `videojs-markers` using npm:


   npm install video.js videojs-markers


2. **Import Dependencies:**

   In your React component file, import the required dependencies:

import videojs from 'video.js';

import 'video.js/dist/video-js.css';

import 'videojs-markers/dist/videojs.markers.css';

import 'videojs-markers';

3. **Create the Video Player Component:**

   Create a React component for your video player. You can use the `useEffect` hook to initialize the video player and markers:

import React, { useEffect, useRef } from 'react';

const VideoPlayer: React.FC = () => {

const videoRef = useRef<HTMLVideoElement>(null);

useEffect(() => {

// Initialize video player

const player = videojs(videoRef.current, {}, () => {

console.log('Video.js player is ready');


// Add markers

const markers = [

{ time: 10, text: 'Marker 1' },

{ time: 20, text: 'Marker 2' },

// Add more markers as needed





// Cleanup on component unmount

return () => {

player.dispose(); // Dispose of the video player instance


}, []); // Run only on component mount

return (

<div data-vjs-player>

<video ref={videoRef} className="video-js vjs-default-skin" controls>

<source src="your-video-source.mp4" type="video/mp4" />





export default VideoPlayer;

   Make sure to replace `"your-video-source.mp4"` with the actual source URL of your video.

4. **Styling:**

   You may want to add some styling to your component. You can customize the appearance using CSS.

.video-js {

width: 100%;

height: auto;


5. **Usage:**

   Use your `VideoPlayer` component wherever you need it in your application:

import React from 'react';

import VideoPlayer from './VideoPlayer';

const App: React.FC = () => {

return (


<h1>Your React Video Player</h1>

<VideoPlayer />




export default App;

Ensure you have the correct paths and URLs for your video source, and adjust the markers array as needed. This example assumes you have a single video source, but you can customize it for multiple sources or other configurations based on your requirements.