We Keep Coding

How to implement "press space to pause html5 video" except when input is focused? (Jquery)

I'm looking to implement a space-to-pause system for a HTML5 video on my site via jquery, but what I find is that when I've clicked on an input on the same page, adding a space to the text input doesn't work. It just keeps playing/pausing the video.
What I'm looking to do is some kind of if statement that says "if input is not focused, press space to pause video", but also something to repeatedly check this condition so it doesn't happen just once.
I was almost successful using setInterval to do this but jquery's timing is completely imprecise and just leads to the video only pausing sometimes.
Current space-to-pause code is as follows.
$(window).keypress(function(e) {
var video = document.getElementById("vid");
if (e.which == 32) {
if (video.paused)
video.play();
else
video.pause();
}
});
Thanks for any help.

I'd suggest checking the target of your click event and working based on that! Something like this should work
$(window).keypress(function(e) {
const video = document.getElementById("vid");
// check if keypress event originates from an input and if so; NOOP
const nodeName = e.target.nodeName;
if (nodeName && nodeName.toUpperCase() === "INPUT") { return; }
if (e.which == 32) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video controls id="vid" style="width: 400px; display:block;">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/mp4">
</video>
<input type="text" value="write here!">

Using kepresses and if statements to enable and disable elements

I am using electron to build an app that has a fullscreen feature (of course). I am trying to use the F11 key (keyCode = "85") to enable a message on my Html page that tells the user to press F11 to exit fullscreen. I am using var i = 0 to set the status of the fullscreen app, where i = 0; is not fullscreen and where i = 1; is fullscreen. This feature is partially working except for when I try to disable it by pressing F11. When pressed, the element does not set its display to none.
What am I doing wrong? Thanks!
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
var i = 0;
if (i == "0") {
if (e.keyCode = "85") {
document.getElementById('exitfullscreenmessage').style.display = "block";
i = 1;
}
} else if (i == "1") {
if (e.keyCode = "85") {
document.getElementById('exitfullscreenmessage').style.display = "none";
i = 0;
}
}
}

You're re-initializing i to 0 every time you enter the function. You need to move the variable out of the function.
You should also use boolean values to implement alternating values, not 1/0. And don't put quotes around numbers.
You also had a typo, you were using = instead of == when testing e.keyCode.
window.addEventListener("keydown", checkKeyPressed, false);
var fullscreenmessage = false;
function checkKeyPressed(e) {
//the correct keycode for F11 is 122
if (e.keyCode == 122) {
document.getElementById('exitfullscreenmessage').style.display = fullscreenmessage ? "none" : "block";
fullscreenmessage = !fullscreenmessage;
}
}
#exitfullscreenmessage {
display: none;
}
<div id="exitfullscreenmessage">Exit full screen</div>

use spacebar to play/pause video in reveal.js

I’m using reveal.js for a presentation of some short video clips (1 clip per slide). The default settings of reveal.js presentation allow to navigate between the slides using the left/right arrow keys. I’d like to use the spacebar (key=32) to play/pause the video and thus I am trying to change/override the default keyboard bindings in reveal.js. https://github.com/hakimel/reveal.js/ suggests the following:
Reveal.configure({
keyboard: {
32: function() {}
}
});
I tried to insert several codes/functions, but when I try to run the code on a browser, either I get a black screen or nothing at all happens.
var video = document.getElementById('video');
var $video = $('video');
$(window).keydown(function(e) {
if (e.keyCode === 32) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
As you can see, I am an absolute beginner in JS/reveal.js and I would very much appreciate your help. Thanks!

that will fix your problem:
Reveal.initialize({
// Enable keyboard shortcuts for navigation
keyboard: true,
}
and for the custom keyboard events:
Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: function(){
if (video.paused == true) video.play();
else video.pause();
}
}
}
});

Thanks! but with this code I only get a black screen. However, it works as follows for the first clip:
Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: function vidplay(){
var video = document.getElementById("video");
if (video.paused == true) video.play();
else video.pause();
}
}
});
Do you know how I can make this work for the other clips/slides? The video-id is "video" for every clip on every slide:
<video width="1200" height="600" ``controls id="video">
<source src="F06.mp4" type="video/mp4" >
</video>

I know I am responding to an old post. I found this thread when trying to find something that would work for me, and it lead to the solution I implemented.
The other solutions only seemed to work for one video, and (when combined with other suggestions I found) there were some other issues such as spacebar playing the video after leaving the slide.
I used this configuration:
Reveal.initialize({
keyboard: {
13: 'next',
32: () => {
var currentSlide = Reveal.getCurrentSlide();
var currentVideo = currentSlide.getElementsByTagName("video")[0];
if (currentVideo) {
if (currentVideo.paused == true) currentVideo.play();
else currentVideo.pause();
}
else {
Reveal.next();
}
}
}
});
Using the configuration above, spacebar will only play/pause a video when there is a video on the current slide. Otherwise, spacebar advances to the next slide.
Some other solutions worked in Chrome but not Firefox due to differences in the way they handle the video element, but this approach worked

Pause the HTML5 video when space bar is pressed

I have this script which should pause the HTML5 video when space bar is pressed. Bur in Firefox it pauses on all keys you press no matter is space or other and in Chrome it doesen't work at all.
Also double clicking the video doesen't go to full screen.
$(window).keypress(function(e) {
if (e.keyCode == 0) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
$video.dblclick(function() {
video.mozRequestFullScreen();
video. webkitRequestFullscreen();
video.requestFullscreen();
});
fiddle: http://jsfiddle.net/6f7navgu/4/

Try the snippet below
var video = document.getElementById('video_id');
document.onkeypress = function(e){
if((e || window.event).keyCode === 32){
video.paused ? video.play() : video.pause();
}
};
To have the video in fullscreen mode, use the following one
var video = document.getElementById("video_id");
document.ondblclick = function(){
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}
};
Working jsBinl

Use keyup and Event.keyCode === 32 instead. Fiddle
If you like, you could use keydown as well in this case, because you're not testing for an input value.

Ok this is jquery and it pause and plays video with space and on video window click:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#videoID').click(function(){this.paused?this.play() :this.pause();});
$(window).keypress(function(e) {
if (e.keyCode == 32 || e.keyCode === 32) {
$('#videoID').get(0).paused?$('#videoID').get(0).play() :$('#videoID').get(0).pause();
}
});
</script>

Double clicking wouldn't go to full screen; you would have to add that action. As for pause, try which property of the jQuery event.
$(window).keypress(function(e) {
// debugger;
if (e.which == 32) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
Uncomment the debugger so that you can inspect the event that happened.

Try this snippet
$(window).keypress(function(e) {
if (e.which == 32) {
video.paused ? video.play() : video.pause();
}
});
video.ondblclick = function(){
video.requestFullscreen();
};

Using .play() to play/pause a video by pressing the enterkey

I'm searching for a way to start and stop an HTML 5 video in Chrome (I'm using impress.js, so it only has to work in Chrome) by pressing the enter key.
I know that it has something to do with the .play() function, but I'm rather new to JavaScript.
Can someone give me a hint?

var video = document.getElementById('video-element-id-here');
document.onkeypress = function(e) {
if ( (e || window.event).keyCode === 13 /* enter key */ ) {
video.paused ? video.play() : video.pause();
}
};
OP: Please see comments too.

var myVideo = document.getElementById('vid-id');
document.documentElement.addEventListener("keyup", function(e) {
var ev = e || window.event; // window.event for IE fallback
if(ev.keyCode == 13) {
// toggle play/pause
if(myVideo.paused) { myVideo.play(); }
else { myVideo.pause(); }
}
});
Note: keyup fires only once per press, when a key is released. keydown and keypress will fire repeatedly if the user holds down the key.