feature: Play/Pause Effect on the Video Player

[mrpaaradox]

Description: Once the user hits play/pause an effect should be shown on the video player like we have in the below Screenshot/or a basic Youtube Video Player.

[dheerajsharma1805]

Trying this one out.

[Aryam2121]

I think this was the logic if i am right please merge this sir

const video = document.getElementById('videoPlayer') as HTMLVideoElement; const playPauseButton = document.getElementById('playPauseButton') as HTMLButtonElement;

playPauseButton.addEventListener('click', togglePlayPause);

function togglePlayPause() { if (video.paused) { video.play(); // Add effect for play video.classList.add('playing-effect'); } else { video.pause(); // Add effect for pause video.classList.remove('playing-effect'); } } //and add some css ....

[Aryam2121]

import React, { useEffect, useRef, FunctionComponent, useState } from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css';

interface VideoPlayerProps {

}

const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({ /* Your props destructuring */ }) => { const videoRef = useRef<HTMLVideoElement>(null); const [playing, setPlaying] = useState(false);

useEffect(() => { const videoElement = videoRef.current; if (!videoElement) return;

const player = videojs(videoElement);

player.on('play', () => {
  setPlaying(true);
});

player.on('pause', () => {
  setPlaying(false);
});

return () => {
  player.dispose();
};

}, []);

const togglePlayPause = () => { const videoElement = videoRef.current; if (!videoElement) return;

if (videoElement.paused) {
  videoElement.play();
} else {
  videoElement.pause();
}

};

return (

<video ref={videoRef} className="video-js" /> <button onClick={togglePlayPause}> {playing ? 'Pause' : 'Play'}

); };

export default VideoPlayer;

[heyhexadecimal]

Hi , is anyone working on this ??