I am making a video player with gestures like double tap to seek 10 seconds. But the default browser function makes the video full screen on double tap. To stop that, I removed the control to make the video full screen and used an external button for that which worked. But I am unable to stop the double tap to minimize function when the video is full screen. What should I do?
I have already tried setting the onDoubleTap and onDoubleClick event e to e.preventDefault() but it didn’t work. Please help me if you have ever implemented anything as such.
Prajwal sharma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
I would suggest you drop your code snipet so we know what you are using because I tried something like this using useRef hook to create a reference to the video element and I also attached event listeners to handle the double-tap action and prevent the default behavior.
You can also create a custom double-tap handler to manage the seeking functionality and prevent the default minimize action.
Something like this:
import React, { useRef, useEffect } from 'react';
const VideoPlayer = () => {
const videoRef = useRef(null);
useEffect(() => {
const videoElement = videoRef.current;
let lastTap = 0;
const handleDoubleClick = (e) => {
e.preventDefault();
e.stopPropagation();
// You can add your double-tap handling logic
console.log('Double-tap detected');
};
const handleTouchEnd = (e) => {
const currentTime = new Date().getTime();
const tapLength = currentTime - lastTap;
if (tapLength < 500 && tapLength > 0) {
e.preventDefault();
e.stopPropagation();
handleDoubleClick(e);
}
lastTap = currentTime;
};
videoElement.addEventListener('touchend', handleTouchEnd);
videoElement.addEventListener('dblclick', handleDoubleClick);
return () => {
videoElement.removeEventListener('touchend', handleTouchEnd);
videoElement.removeEventListener('dblclick', handleDoubleClick);
};
}, []);
return (
<div>
<video ref={videoRef} controls width="600">
<source src="video-file.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<button onClick={() =>
videoRef.current.requestFullscreen()}>Fullscreen</button>
</div>
);
};
export default VideoPlayer;