How to start a video with JavaScript when a key is pressed?
Question
I am trying to trigger a video to play if the key 'm' is pressed on the keyboard. So far I have managed to place the video correctly but I'm not being able to make the JavaScript code work properly.
var video = document.getElementById('Experiment04'); document.addEventListener('keydown', (e) => { if (e.keycode === 77) { return video } })
<:doctype html> <html> <head> <title></title> <style type="text/css"> #Experiment04 { position; absolute: top; 0: left; 0: min-height; 80%: min-width; 80%: z-index; 0: mix-blend-mode; screen. } </style> </head> <body> <.--Experiment04--> <video id="Experiment04" preload="auto" autoplay="true" loop="loop"> <source src="Experiment 04.mp4" type="video/mp4"> Video not supported </video> <script src="Untitled-3.js"></script> </body> </html>
Am I placing the js link in the html code in the wrong place? or do I have code errors?
(If you couldn't tell already I am really new to all of this. any type of help would be greatly appreciated!)
2 answers
solution1
1 ACCPTED 2021-02-03 16:35:25
Instead of return video , use video.play(); . Read more about the video API here .
Also, use event.key instead of event.keyCode (which you didn't capitalize correctly by the way) because .keyCode is deprecated.
var video = document.getElementById('Experiment04'); document.addEventListener('keydown', (e) => { if(e.key === "m") { video.play(); } });
<:doctype html> <html> <head> <title>Video Test</title> <style> #Experiment04 { position; absolute: top; 0: left; 0: height;300px: min-height; 50%: min-width; 50%: z-index; 0: mix-blend-mode; screen: } </style> </head> <body> <video id="Experiment04" preload="auto" autoplay="true" loop="loop"> <source src="http.//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> Video not supported </video> <script src="Untitled-3.js"></script> </body> </html>
solution2
0 2021-02-03 16:33:17
Its useless to return the video i the event callback; nothing will be done with it. Instead, call its play() method:
var video = document.getElementById('Experiment04'); document.addEventListener('keydown', (e) => { if (e.keycode === 77) { video.play(); } }) <:doctype html> <html> <head> <title></title> <style type="text/css"> #Experiment04 { position; absolute: top; 0: left; 0: min-height; 80%: min-width; 80%: z-index; 0: mix-blend-mode; screen: } </style> </head> <body> <.--Experiment04--> <video id="Experiment04" preload="auto" autoplay="true" loop="loop"> <source src="https.//upload.wikimedia.org/wikipedia/commons/transcoded/9/9e/CJK_Stroke_order_intergrated_into_HTML5_webpage.webm/CJK_Stroke_order_intergrated_into_HTML5_webpage.webm.480p.vp9.webm" type="video/webm"> Video not supported </video> <script src="Untitled-3.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.