This content originally appeared on DEV Community and was authored by Juan Belieni
In this post, I will be showing how to add a preview feature for the videos inside your HTML page.
First, I will be using this simple HTML code as the base to create the preview feature:
<video>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
/>
</video>
So, to start, we should create the startPreview and stopPreview functions. To contextualize, the preview will be played during 4 seconds, starting after the first second at a playback rate of 50%.
The startPreview will set the values so that the preview will be played as mentioned, and stopPreview will reset the values to the default ones.
const video = document.querySelector("video");
function startPreview() {
video.muted = true;
video.currentTime = 1;
video.playbackRate = 0.5;
video.play();
}
function stopPreview() {
video.currentTime = 0;
video.playbackRate = 1;
video.pause();
}
After it, we should create the event listeners so that the preview can be played on hover. To accomplish this, a timeout will be used to stop the preview after 4 seconds.
let previewTimeout = null;
video.addEventListener("mouseenter", () => {
startPreview();
previewTimeout = setTimeout(stopPreview, 4000);
});
video.addEventListener("mouseleave", () => {
clearTimeout(previewTimeout);
previewTimeout = null;
stopPreview();
});
It's important to clear the timeout every time the user leaves the video area, because it can happen that a previous timeout stops the video when the user enters the video area for a second time before the 4 seconds.
Here is the result:
This content originally appeared on DEV Community and was authored by Juan Belieni
Juan Belieni | Sciencx (2021-09-06T21:13:24+00:00) Video preview on hover with HTML and JavaScript. Retrieved from https://www.scien.cx/2021/09/06/video-preview-on-hover-with-html-and-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.