Ich bin beim Coden immer etwas faul und hätte es auf die schnelle so gelöst:
Dein switch Konstrukt ist effektiver weil es nach dem break nichts mehr abarbeitet, wäre mir bei nur vier Möglichkeiten aber egal..
HTML-Code:
<!DOCTYPE html> <html lang="de"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titel</title> <video id="vid" controls> <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"> </video> <script> var playOrPause = () => vid.paused ? vid.play() : vid.pause(), seekPos = i => vid.currentTime += i, eventHandler = $myKey => { $myKey == 'Escape' && vid.pause() $myKey == 'Space' && playOrPause() $myKey == 'ArrowLeft' && seekPos(-5) $myKey == 'ArrowRight' && seekPos(5) } document.addEventListener("DOMContentLoaded", () => { [document, vid].forEach(el => el.addEventListener('keydown',ev => eventHandler(ev.code))) vid.addEventListener('click', () => playOrPause()) }) </script>
Kommentar