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
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!">
Hello I have the following button and JS code:
<button type="button" id="play-pause" ><img id = "playbtn" src="img/icons/play.png"></button>
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
document.getElementById("playbtn").src = "img/icons/pause.png";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
document.getElementById("playbtn").src = "img/icons/play.png";
}
});
When i click my button it changes the button to a play icon image and when i click it again it changes it to a pause icon button. This works fine but it still displays the default button background. I want it to be just an image. It currently gives my a button GUI with an image in it. Thats not what I want, how can I fix it?
Probably you are not changing the value of video.paused
playButton.addEventListener("click", function() {
if (video.paused == true) {
video.paused = false;
// Play the video
video.play();
// Update the button text to 'Pause'
document.getElementById("playbtn").src = "img/icons/pause.png";
} else {
video.paused = true;
// Pause the video
video.pause();
// Update the button text to 'Play'
document.getElementById("playbtn").src = "img/icons/play.png";
}
});
You can reset default <button> styles via CSS. This link might be helpful for you.
Sounds easy but an absolutely nightmare. I cannot detect the escape button being pressed. I need to know if the fullscreen mode is exited as you cannot block the escape button from being pressed. The javascript is injected to a HTML which loads in a webview.
$(document).keyup(function(e) {
if (e.keyCode === 27) {
console.log("esc pressed")
}
});
This only works when the view is not fullscreen!
Going fullscreen:
$('#fullscreen-button').unbind("click").on('click', function(){
viewer.setFullscreen();
});
setFullscreen: function() {
if(!viewer.isFullScreen()) {
console.log("window fullscreen --> ",viewer.isFullScreen());
document.body.webkitRequestFullscreen();
$("#presenter, #slide-container .owl-item").addClass('fullscreen tenTwenty');
$("#viewer-container, #slide-container").addClass('fullscreen thirteenSix');
$('.fullscreen').width(screen.width);
$('.fullscreen').height(screen.height);
$('#slide-container').trigger('refresh.owl.carousel');
} else {
document.webkitCancelFullScreen();
console.log("window fullscreen --> ",viewer.isFullScreen());
$('.tenTwenty').width(1024); $('.tenTwenty').height(768);
$('.thirteenSix').width(1366); $('.thirteenSix').height(768);
$("#presenter, #viewer-container, #slide-container, #slide-container .owl-item").removeClass('fullscreen tenTwenty thirteenSix');
$('#slide-container').trigger('refresh.owl.carousel');
}
},
isFullScreen: function(){
if ( document.webkitFullscreenElement) {
return true;
} else {
return false;
}
},
Since you are using jQuery, you can add a listener to check the change of fullscreen state. It doesn't tell you if it's opening or closing the fullscreen, but you can check all states like this:
// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
if(!viewer.isFullScreen()) {
// you are out of fullscreen
} else {
// you are in fullscreen
}
});
EDIT:
As we talk in comments, vanilla js fits perfectly:
document.addEventListener('webkitfullscreenchange', function(e) {});
I'm trying to reset my audio on typing on the same key I used to play it
HTML :
<audio preload="auto" id="sound1" src="sons/nadal.ogg" src="sons/nadal.mp3"></audio>
JS :
$(document).keydown(function(e){
var son_1 = document.getElementById('sound1');
if (e.keyCode == 65) {
son_1.play();
son_1.currentTime = 0;
return false;
}
});
Works perfectly to launch it, but I want to stop it when i type on the same key. I tried lots of solution found on the internet but I don't achieved to make one work.
Thank you very much for your help !!!
You should be able to check the property 'paused' to determine if the audio tag is playing or not:
$(document).keydown(function(e){
var son_1 = document.getElementById('sound1');
if(e.keyCode == 65){
son_1.currentTime = 0;
if(son_1.paused)
son_1.play();
else
son_1.pause();
return false;
}
});
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.