Alternative Ways To Close HTML5 Video-player - Stack Overflow

Trang chủ » Html5 Video Alternative » Alternative Ways To Close HTML5 Video-player - Stack Overflow

Có thể bạn quan tâm

I heard there is no way to close HTML5 video-player. So I wrote an alternative way. With the following code, double click on any character of these sentences, a video will start playback from a fixed temporal position (100 sec) at the spatial position where you would double-click. Next, press any key to stop the video and erase the video player.

enter image description here

But this way uses window-refresh (window.location.reload()) and so isn't gentle for eyes. I wonder if there are alternatives gentle for eyes.

My code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> video { display: none; position: fixed; } </style> </head> <body> <video></video> <li>Double click on any character of these sentences.</li> <li>A video will start playback from a fixed temporal position (100 sec) <li>at the spatial position where you would double-click.</li> <li>Next, press any key to stop the video and erase the video player.</li> <script> document.addEventListener('DOMContentLoaded', (e) => { //PLAYBACK VIDEO document.querySelector('body').addEventListener('dblclick', (e) => { const video = document.querySelector('video'); video.controls = true; video.width = "200"; video.autoplay = true; video.src="https://archive.org/download/BigBuckBunny_328/BigBuckBunny.ogv#t=100"; video.style.display = 'block'; video.style.left = e.clientX + 'px'; video.style.top = e.clientY + 'px'; }); // CLOSE PLAYER document.querySelector('body').addEventListener('keypress', (e) => { window.location.reload();//<<--- LOOK AT THIS!!! }); }); </script> </body> </html>

Từ khóa » Html5 Video Alternative