Installation Guide

1import { VideoPlayer } from 'react-video-audio-player';
2
3function App() {
4  return (
5    <VideoPlayer src="video.mp4" />
6  );
7}

1<div id="video-player-container"></div>
2
3<!-- UMD -->
4<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.2/dist/index.umd.min.js"></script>
5<link
6  rel="stylesheet"
7  href="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.2/dist/video-audio-player.min.css"
8/>
9
10<script>
11  // Initialise the VideoPlayer
12  const videoPlayerContainer = document.getElementById('video-player-container');
13  const videoPlayer = VideoPlayer({
14    src: 'video.mp4',
15    controls: true,
16    autoPlay: false,
17    muted: false,
18    loop: false,
19    poster: 'poster.jpg',
20    onReady: () => {
21      console.log('Video is ready to play');
22    },
23  });
24  videoPlayerContainer.appendChild(videoPlayer);
25</script>

1import { AudioPlayer } from 'react-video-audio-player';
2
3function App() {
4  return (
5    <AudioPlayer src="audio.mp3" />
6  );
7}

1<div id="audio-player-container"></div>
2<!-- UMD -->
3<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.2/dist/index.umd.min.js"></script>
4<link
5  rel="stylesheet"
6  href="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.3.2/dist/video-audio-player.min.css"
7/>
8
9<script>
10  // Initialise the AudioPlayer
11  const audioPlayerContainer = document.getElementById('audio-player-container');
12  const audioPlayer = AudioPlayer({
13    src: 'audio.mp3',
14    controls: true,
15    autoPlay: false,
16    muted: false,
17    loop: false,
18    onReady: () => {
19      console.log('Audio is ready to play');
20    },
21  });
22  audioPlayerContainer.appendChild(audioPlayer);
23</script>