I'm trying to set rewrite some shortcut function for video. Everything works fine except when pressing spacebar. Here's my code:
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32 || e.which == 80) {
e.preventDefault();
e.stopPropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
Here I use spacebar and P to toggle play and pause. Using spacebar somehow toggled two times while using P not.
I try adding event listener of keyup and keypress to reject the spacebar input. But It doesn't work too.
Is there anything about the HTML5 Video I am missing?
Since the spacebar by default plays and pauses the video, you have to invert functions in your ternary operator. No need to change them when dealing with the p tag.
So the only way is to handle the two different key codes in 2 different ifs.
See below the working code snippet.
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
else if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
If you cannot split it, what about nesting the if-else?
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32 || e.which == 80) {
if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
} else {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if ([32,80].includes(e.which)) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
Related
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!">
I have code for pressing a key but I need to implement where the key is held to play the video
var vid = document.getElementById('myVideo');
document.onkeypress = function(e){
if((e || window.event).keyCode === 112){
vid.paused ? vid.play() : vid.pause();
Iām aware I have to use onkeydown and onkeyup but not sure how
const vid = document.getElementById('myVideo');
const playPauseVideo = ev => {
if (ev.key !== 'F1') return; // Do nothing if not F1
ev.preventDefault(); // Prevent browser default action (on F1)
vid[ev.type === 'keydown' ? 'play' : 'pause']();
}
document.addEventListener('keydown', playPauseVideo);
document.addEventListener('keyup', playPauseVideo);
Press and hold F1 to play video
<video id="myVideo" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></video>
I am trying to set properties on a video where arrowLeft keypress is -1 frame and arrowright keypress is +1 frame, but I not able to prevent default behavior.
I've tried using e.preventDefautl() e.stopPropagation and return false.
<video id="video_1" class="video" controls class="video" width="800" height="600" mediagroup="videoMG1" autobuffer preload >
<source src="{{movie["url"]}}" />
</video>
var video = document.getElementById("video_1");
video.addEventListener("keypress", function(e){
return false;
});
video.addEventListener("keyup", function(e){
return false;
});
var video2 = VideoFrame({
id: 'video_1',
frameRate: 25.00,
callback: function(response) {
console.log(response);
}
});
video.addEventListener("keydown", function(e){
e.preventDefault()
e.stopPropagation()
debugger;
if( e.KeyCode == 39 ){
console.log("backward")
video.seekBackward(1)
}else if( e.KeyCode == 37) {
console.log("forwrd")
video.seekForward(1)
}
return false;
});
When I enter the debugger, the video has already process the keypressed and moved forward 7 seconds instead of a frame as I would like to.
Thanks for your help !
This is caused by the standard controls displayed by the browser itself.
The only way to get around this is deactivating it completely using:
video.controls=false;
Furthermore you're calling the seekBackward() and seekForward() methods on the wrong object. I assume you're using the VideoFrame library, do you?
At the moment you're doing it like this
video.seekBackward(1);
This is the html5 video element itself - you need to use the VideoFrame object, video2 in your case.
video2.seekBackward(1);
Here's the full code:
<html>
<body>
<script type="text/javascript" src="VideoFrame.min.js"></script>
<video id="video_1" class="video" controls class="video" width="800" height="600" mediagroup="videoMG1" autobuffer preload>
<source src="myVideo.mp4" />
</video>
<div id="videoControls">
<button type="button" id="playPause">āµ</button>
<button type="button" id="mute">š</button>
<input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
</div>
<script>
var video = document.getElementById("video_1");
var video2 = VideoFrame({
id: 'video_1',
frameRate: 25.00,
callback: function(response) {
console.log(response);
}
});
video.controls = false;
video.addEventListener("keydown", function(e) {
console.log("asd", e.keyCode)
if (e.keyCode == 39) {
console.log("backward")
video2.seekBackward(1)
} else if (e.KeyCode == 37) {
console.log("forwrd")
video2.seekForward(1)
}
return false;
});
document.getElementById("playPause").addEventListener("click", function() {
if (video.paused == true) {
video.play();
this.innerHTML = "āø";
} else {
video.pause();
this.innerHTML = "āµ";
}
});
document.getElementById("mute").addEventListener("click", function() {
if (video.muted == false) {
video.muted = true;
this.innerHTML = "š";
} else {
video.muted = false;
this.innerHTML = "š";
}
});
document.getElementById("volumeBar").addEventListener("input", function() {
video.volume = volumeBar.value;
});
</script>
</body>
</html>
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();
};
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.