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:
```bash
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
];
player.markers({
markers,
});
// 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" />
</video>
</div>
);
};
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 (
<div>
<h1>Your React Video Player</h1>
<VideoPlayer />
</div>
);
};
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.
0 Comments