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();
};
Related
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>
Visitors can right click the web page and select view source or they press ctrl+u or ctr+shft+i or ctrl+shft+j or f12 and they can view the web page source code.
i did not create this code. i only modified it to suit my needs. So credit goes to those out there that are true coders! Thank you! initially i had embedded my html code into an iframe. when a visitor right clicked on the page they got an option for viewing the page source or frame source. other functions were also available that allowed the viewing of the code. adding this code to my pages stopped visitors from easily viewing the code by using any of the above mentioned methods.
<script language="JavaScript">
window.onload = function () {
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ?
e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body oncontextmenu="return false">
<body>
Thanks for the comments everyone! I'm still learning. And yes, it is correct that this usually isn't a good idea to do to a page and yes there will be some who know all the different ways one can access the source code of a page. However, there will be many who only know of a couple ways to get there and many more who dont know how to at all. So I posted the previous before i found some issues with it. so i re-worked the script and now it does what i wanted. Im posting in the hopes that it helps someone. Goal: visitors will be unable to right-click the "page" or use ctrl+u, ctrl+shft+i, ctrl+shft+j or f12 to view options AND will be unable to use the browser back button. NOTE: web page is embedded within an iframe. Again, thanks to you coders and the info that you post! it's helping me learn!
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ?
e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}, 50);
</script>
</head>
<body onLoad="changeHashOnLoad(); ">
My script execute some actions (like stop one audio player) in case the user press the space bar:
$('html').keydown(function(e){
if(e.keyCode == 32){
// Stop the audio player
}
}
But the problem comes when a user tries to write a message in the textarea because the previous function executes (and it's very annoying)... How can I do to not execute the function, in case the user is writing a message on a textarea or other elements?
You need to skip when user is focussing some control, this example will prevent the player to stop if user i typing in a text area.
$(function () {
$(document).keypress(function (e, f) {
var tagName = e.target.tagName.toLowerCase();
if (tagName != 'textarea') {
if (e.keyCode == 32) {
console.log('Stop Playing');
}
}
});
});
Hopw this helps.
Try this,
$('#textAreaId').keypress(function(e){
e.preventDefault();
});
Use stopPropagation method on event object when space bar pressed on textarea.
$(document).ready(function(){
$("#testTextArea").keydown(function(e){
if(e.keyCode == 32){
e.stopPropagation();
}
});
$("#container").keydown(function(e){
if(e.keyCode == 32){
alert('Player Stoped/Started')
}
});
})
fiddle : http://jsfiddle.net/b0u3z8pg/16/
Try This :)
$('html').keydown(function(e) {
if(e.keyCode == 32){
// stop the music player
}
});
$('input, textarea').keydown(function(e) {
e.stopPropagation();
});
Something like this:
The code inside the if statement only triggers if you are not focused inside a text area or input.
jsfiddle demo
HTML:
<textarea></textarea>
<input type="text">
jQuery:
var exclude = $("textarea, input");
$('html').on("keydown", function( e ) {
if ( e.keyCode == 32 && !exclude.is(':focus') ) {
console.log( 'Space pressed outside input or text area' );
}
});
You should check the sender of the event, if the sender is other controls then the audio player then ignore the call, otherwise stop the player.
$('html').keydown(function(e){
var senderID = $(event.target).attr('id');
if(senderID == 'myAudioPlayerID' && e.keyCode == 32){
// Stop the audio player
}
}
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.
I am creating a music player which uses the spacebar to pause and play audio, now is it possible to know if someone is currently typing in a textfield, because right now, if this user types in a textfield and audio is playing, when the user presses space the audio pauses, I would like basically that when the user is not in a textfield that a user can just play and pause audio, but when the user is typing that this function is disabled so the audio keeps playing. The code below, is the code I'm am current using for detecting when space is pressed;
//IF Space bar is Pressed
$(window).keypress(function(e) {
if(e.keyCode == 32) {
if(document.getElementById('audio').paused){
if(document.getElementById('video').style.display=="block"){
}
else{
document.getElementById('audio').play();
document.getElementById('pause').style.display="block";
document.getElementById('play').style.display="none";
}
}
else{
if(document.getElementById('video').style.display=="block"){
}
else{
document.getElementById('audio').pause();
document.getElementById('pause').style.display="none";
document.getElementById('play').style.display="block";
}
}
}
});
//END IF Space bar is pressed
Check the event sources tagName attribute:
function(e) {
e = e || event;
var el = e.srcElement || e.target,
cando = !(/textarea|input/i.test(el.tagName));
if(cando && e.keyCode == 32) {
/etc.
}
}
You could also try
if(e.keyCode == 32 && document.activeElement != document.getElementById('someTextBox'))
New code
//IF Space bar is Pressed
$(window).keypress(function(e) {
if(e.keyCode == 32) {
var inputs = document.getElementsByTagName('input');
for(var item in inputs)
{
if(inputs[item] == document.activeElement)
return;
}
if(document.getElementById('audio').paused){
if(document.getElementById('video').style.display=="block"){
}
else{
document.getElementById('audio').play();
document.getElementById('pause').style.display="block";
document.getElementById('play').style.display="none";
}
}
else{
if(document.getElementById('video').style.display=="block"){
}
else{
document.getElementById('audio').pause();
document.getElementById('pause').style.display="none";
document.getElementById('play').style.display="block";
}
}
}
});
//END IF Space bar is pressed
Check if a textarea has focus
if(e.keyCode == 32 && !text_area_has_focus) { ...
Logic for that could be something like this, if you're willing to use jQuery:
if(e.keyCode == 32 && !$('input[type=text]:focus').length) { ...