jsDelivr react-video-audio-player demo

HTML

<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player@1.2.0/dist/index.umd.min.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/index.standalone.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/video-audio-player.css">
</head>
<body>
<!-- Standalone Version (no React required) -->
<div id="video-player-container"></div>
<div id="audio-player-container"></div>



<script>
// Initialise the VideoPlayer
const videoPlayerContainer = document.getElementById('video-player-container');
const videoPlayer = VideoPlayer({
    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
    controls: true,
    autoPlay: false,
    muted: false,
    loop: false,
    accentColor: "red",
    poster: 'https://i.ibb.co/W45zMcvj/Sintel-krafy-resized-Viz-Xpress.jpg',
    onReady: () => {
        console.log('Video is ready to play');
    },
});
videoPlayerContainer.appendChild(videoPlayer);

// Initialise the AudioPlayer
const audioPlayerContainer = document.getElementById('audio-player-container');
const audioPlayer = AudioPlayer({
    src: 'https://cdn.pixabay.com/audio/2024/11/11/audio_889cf15c3c.mp3',
    controls: true,
    autoPlay: false,
    muted: false,
    loop: false,
    accentColor: "red",
    onReady: () => {
        console.log('Audio is ready to play');
    },
});
audioPlayerContainer.appendChild(audioPlayer);
</script>
</body>
</html>