Kontrolki wideo – najechanie kursorem
Możesz ulepszyć elementy wideo, dodając zdarzenia do odtwarzacza, np. automatyczne odtwarzanie po najechaniu kursorem.
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Video Controls - Hover Play/Pause</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8 <style>
9 * { box-sizing: border-box; }
10
11 html, body {
12 width: 100%;
13 height: 100%;
14 margin: 0;
15 padding: 0;
16 }
17
18 body {
19 display: grid;
20 place-items: center;
21 }
22
23 video {
24 width: 340px;
25 height: 340px;
26 object-fit: cover;
27 border: 1px solid #999;
28 cursor: pointer;
29 outline: none;
30 background: white;
31 }
32
33 video:hover { border-color: #111; }
34 video:focus { outline: none; }
35 </style>
36 </head>
37 <body>
38 <video id="v" loop muted preload="auto" playsinline>
39 <!-- Podmień src na własny plik .webm/.mp4 -->
40 <source src="/media/video-controls-loop.webm" type="video/webm" />
41 </video>
42
43 <script>
44 (function(){
45 const el = document.getElementById('v');
46 if (!el) return;
47
48 el.addEventListener('mouseenter', () => el.play().catch(() => {}));
49 el.addEventListener('mouseleave', () => el.pause());
50 })();
51 </script>
52 </body>
53</html>