To learn how to detect key pressed I recommend you read this post – Detect arrow key press in JavaScript. Make an HTML5 video in slow motion using DOM playbackRate property.The keycode for up arrow is 38 and for down is 40. Inside our onkeydown event, we are detecting if up or down arrow key pressed from the keyboard or not by checking the keycode. When a user presses one of these two keys, we have to increase or decrease the volume with JavaScript.īelow is our Complete JavaScript code: var audio_element = document.getElementById("cs_audio") Inside the onkeydown event, we will detect if the up or down arrow key pressed by detecting the key code.
Now we are going to use onkeydown event to detect which key pressed. So we have taken our audio element in a variable by the id of the audio tag. So here we will let the user control the volume of our HTML5 audio player with the up and down arrow keys.Īt first, let’s take our audio element in a JavaScript variable: var audio_element = document.getElementById("cs_audio") Now, you can’t control or increase and decrease the volume of this player by pressing keys from the keyboard. You can see that we have created the HTML audio player. The up arrow key will increase the volume and down arrow key will decrease volume.įirst of all, let’s create our HTML5 player: In this tutorial, we will write our JavaScript code to increase and decrease the volume of our HTML player with up and down arrow keys just from the keyboard. Get other bookmarklets here too, such as for aiding you on GitHub.Today, in this post I am going to show you how you can control HTML5 video/audio player volume from the key in JavaScript.I added all of the above playback speed bookmarklets, and more, into a folder named 1.00x on my bookmark bar, as shown here: Here are all of my playback-speed bookmarklets: When copying the "URL" portion of each bookmark below, copy the entire multi-line code block, new-lines and all, into the "URL" field of your bookmark creation tool in your browser.ĭocument.querySelector('video').playbackRate = 0.5 ĭocument.querySelector('video').playbackRate = 1.0 ĭocument.querySelector('video').playbackRate = 1.5 ĭocument.querySelector('video').playbackRate = 2.0 (Tested in Chrome while playing videos on YouTube, but should work anywhere-especially useful for speeding up online training videos).įor anyone wanting to add these as "bookmarklets" (bookmarks containing JavaScript code instead of URLs) to your browser, use these browser bookmark names and URLs, and add each of the following bookmarks to the top of your browser.
0 kommentar(er)
