I have spent over 5 hours each day for the last 3 days trying to get this to work. I have done research into this topic and nothing I have found on stack overflow, youtube, etc has helped me understand this any more. To give you idea of the purpose of this is to set up a local website (non-online, just a file) and present it as a school project, so it only needs to work in chrome. The idea was to have two titles with 4 images below each,
title
img img img img
title
img img img img
now, I am trying to figure out how to trigger a hidden video to go full screen whenever a button is pressed (each video will have a key labeled beside it) (each image has a different video) and disappear when it is over. The code I attached shows how far I have managed to get trying to get it to work. (I have minimal experience with html and even smaller with css and java, have only ever coded games in c# so I don't understand more complicated aspects).
<html><head>
<title>Full Screen Test</title>
<style type="text/css">
/* make the video stretch to fill the screen in WebKit */
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<style>
video::-webkit-media-controls {
display:none !important;
}
</style>
<p><strong>Press enter to go fullscreen</strong></p>
<video src="http://videos-cdn.mozilla.net/serv/webmademovies/Moz_Doc_0329_GetInvolved_ST.webm" width="800" id="myvideo">
<script>
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
</script>
</video>
</body></html>
I think this can help.
You can add the video and try to use fullscreen api, if does not works you use css to simulate fullscreen.
Also use onended to exit fullscreen and hide the player.
Buttons are keypad 0 to 7 [key code 96 to 103]
With the keycode on valid range it gets the correct video index from the array and plays it.
document.addEventListener("keydown", function(e) {
if (e.keyCode >= 96 && e.keyCode <= 103 ) { // Keypad 0 to 7
stopPlaying();
setTimeout(()=> playVideo(e.keyCode-96), 500);
}
}, false);
Hope it helps.
videos = [
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
];
removeVideo = function() {
video = document.getElementById("video");
video.remove();
}
playVideo = function (index) {
wrapper = document.getElementById("wrapper");
wrapper.innerHTML = '<video autoplay onended="removeVideo()" id="video" width="320" height="240" controls> <source src="' + videos[index]+'" type="video/mp4"> </video>';
var elem = document.getElementById("video");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function isFullScreen() {
return (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
function stopPlaying() {
video = document.getElementById("video");
if(isFullScreen()) {
closeFullscreen();
}
if(video) {
video.remove();
}
}
document.addEventListener("keyup", function(e) {
if(e.keyCode == 27 || e.keyCode == 69) { //Esc or e
stopPlaying();
}
}, false);
document.addEventListener("keydown", function(e) {
if (e.keyCode >= 96 && e.keyCode <= 103 ) { // Keypad 0 to 7
stopPlaying();
setTimeout(()=> playVideo(e.keyCode-96), 500);
}
}, false);
#video {
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
}
video::-webkit-media-controls {
display:none !important;
}
<h6> Videos 1 </h6>
<img onclick="playVideo(0)" src="https://via.placeholder.com/50">0
<img onclick="playVideo(1)" src="https://via.placeholder.com/50">1
<img onclick="playVideo(2)" src="https://via.placeholder.com/50">2
<img onclick="playVideo(3)" src="https://via.placeholder.com/50">3
<h6> Videos 2 </h6>
<img onclick="playVideo(4)" src="https://via.placeholder.com/50">4
<img onclick="playVideo(5)" src="https://via.placeholder.com/50">5
<img onclick="playVideo(6)" src="https://via.placeholder.com/50">6
<img onclick="playVideo(7)" src="https://via.placeholder.com/50">7
<div id="wrapper">
<h6> Exit video </h6>
<div>
You can type 'e' to exit the video.
</div>
<div id="wrapper">
</div>
Related
I'm working for studies purposes on a web site that can help people with visual impairment. The site has to play audio files thanks to keyboard's buttons. My problem is: when I play an audio (for example audio1) and then I play another one (for example audio2), the two audio overlap eachother. My idea is to stop an audio using another button, for example X. So, if audio1 is playing and I press X, then audio1 should stop. I'll add my code here.
Thanks.
// HTML:
<audio src="audio/homepage_benvenuto.mp3" autoplay>
<audio src="audio/homepage_0.mp3" id="audio0">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_1.mp3" id="audio1">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_2.mp3" id="audio2">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_3.mp3" id="audio3">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_4.mp3" id="audio4">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_5.mp3" id="audio5">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_6.mp3" id="audio6">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_7.mp3" id="audio7">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_8.mp3" id="audio8">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_9.mp3" id="audio9">
<p>Your browser does not support the audio element.</p>
</audio>
<audio src="audio/homepage_I.mp3" id="audioI">
<p>Your browser does not support the audio element.</p>
</audio>
// JavaScript:
var source = "audio/homepage_benvenuto.mp3"
var audio = document.createElement("audio");
audio.autoplay = true;
audio.load()
audio.addEventListener("load", function()
{
audio.play();
}, true);
audio.src = source;
function checkKeyPressed(e)
{
var player;
if (e.keyCode == "48") // 48 = 0
{
document.getElementById('audio0').play()
player = document.getElementById('audio0');
}
if (e.keyCode == "49") // 49 = 1
{
document.getElementById('audio1').play()
player = document.getElementById('audio1');
}
if (e.keyCode == "50") // 50 = 2
{
document.getElementById('audio2').play()
player = document.getElementById('audio2');
}
if (e.keyCode == "51") // 51 = 3
{
document.getElementById('audio3').play();
player = document.getElementById('audio3');
}
if (e.keyCode == "52") // 52 = 4
{
document.getElementById('audio4').play();
player = document.getElementById('audio4');
}
if (e.keyCode == "53") // 53 = 5
{
document.getElementById('audio5').play();
player = document.getElementById('audio5');
}
if (e.keyCode == "54") // 54 = 6
{
document.getElementById('audio6').play();
player = document.getElementById('audio6');
}
if (e.keyCode == "55") // 55 = 7
{
document.getElementById('audio7').play();
player = document.getElementById('audio7');
}
if (e.keyCode == "56") // 56 = 8
{
document.getElementById('audio8').play();
player = document.getElementById('audio8');
}
if (e.keyCode == "57") // 57 = 9
{
document.getElementById('audio9').play();
player = document.getElementById('audio9');
}
// Here I tried to create a script to stop the audio, but it doesn't work
if (e.keyCode == "88") // 88 = X: interrompe audio in corso
{
player.pause();
player.currentTime = 0;
}
Alright so I have taken a look into your code, but the problem is that you store your 'player' variable inside of your checkKeyPressed(e) method. So each time you call the checkKeyPressed method your variable player will be reset, because at the beginning of the method you redeclare it with 'var player;'.
To fix this make sure the player variable is outside of your method like this:
var player = null;
function checkKeyPressed(e)
{
if (e.keyCode == "48") // 48 = 0
{
document.getElementById('audio0').play()
player = document.getElementById('audio0');
}
if (e.keyCode == "49") // 49 = 1
{
document.getElementById('audio1').play()
player = document.getElementById('audio1');
}
if (e.keyCode == "50") // 50 = 2
{
document.getElementById('audio2').play()
player = document.getElementById('audio2');
}
if (e.keyCode == "51") // 51 = 3
{
document.getElementById('audio3').play();
player = document.getElementById('audio3');
}
if (e.keyCode == "52") // 52 = 4
{
document.getElementById('audio4').play();
player = document.getElementById('audio4');
}
if (e.keyCode == "53") // 53 = 5
{
document.getElementById('audio5').play();
player = document.getElementById('audio5');
}
if (e.keyCode == "54") // 54 = 6
{
document.getElementById('audio6').play();
player = document.getElementById('audio6');
}
if (e.keyCode == "55") // 55 = 7
{
document.getElementById('audio7').play();
player = document.getElementById('audio7');
}
if (e.keyCode == "56") // 56 = 8
{
document.getElementById('audio8').play();
player = document.getElementById('audio8');
}
// Here I tried to create a script to stop the audio, but it doesn't work
if (e.keyCode == "88") // 88 = X: interrompe audio in corso
{
player.pause();
player.currentTime = 0;
}
}
Little side note: I see you are using e.keyCode == "88" to pause your music. This means you have to use the combination Shift + x to pause the music instead of only pressing x on your keyboard.
I have a problem with my script.
I am showing a hidden div #alert only when #total=0, and what I am looking for is that it ONLY be displayed when the screen is in landscape. (See CSS).
What is the snippet of the script to add, and which evaluates whether the screen is landscape?
See online DEMO ( JSFiddle ).
Thanks in advance.
$(document).ready(function () {
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = parseFloat($("#total").val());
if (totalStorage != null && total === 0) {
total = totalStorage;
}
if (total > 99.99 && total < 299.99) {
console.log("PASS");
$('#regalo').show();
$('#alert').hide();
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function () {
$('.tooltip').fadeOut('slow');
}, 2000);
//--------------------
if (!$("#notify")[0].paused) { //play audio
$("#notify")[0].pause(); //play audio
$("#notify")[0].currentTime = 0; //play audio
} else { // play audio
setTimeout(function () { //play audio
$("#notify")[0].play(); //play audio
})
}; //play audio
//--------------------
localStorage.setItem('suppress_gift_tooltip_1', 'true')
}
} else if (!total) {
$('#regalo').hide();
$('#alert').show();
} else {
console.log("FAIL");
$('#alert').hide();
$('#regalo').hide();
}
}
$(document).on('click', function (event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegalo();
localStorage.setItem('total', Number($("#total").val()));
}
});
manageRegalo();
});
CSS:
#alert,
.tooltip {
display: none
}
#media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block;
}
}
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo">Regalo</div>
<br>
<div class="tooltip">Tooltip</div>
<br>
<div id="alert">Alert</div>
<br>
<input type="text" id="total" value="">
<button type="button" class="bbp">Enter</button>
Your problem basically is here:
var total = parseFloat($("#total").val());
and consequently here
} else if (!total) {
$('#regalo').hide();
$('#alert').show();
The first time you read total it provides NaN and then the else if (!total) is executing $('#alert').show();
For that reason, you see alert message.
I have disabled scrolling by pressing spacebar using code
in-line(434)
And I use code in-line(427-432) to play/pause video by pressing spacebar anywhere in body.
// So how to enable white-spaces in textarea?
And how to disable playing/pausing video by pressing spacebar in textarea? //
I have tried code in-line(433) to enable white-spaces in textarea but it doesn't work.
https://imgur.com/a/morZomC
427-432:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function() {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); } });
$("body").on("keydown", function(e) { if (e.keyCode == 32) {
if (document.querySelector("video").playing) {
$("video")[0].pause(); } else {
$("video")[0].play(); } } });
433:
$("#comment").on("keydown", function(e) { if (e.keyCode == 32) { return true; } });
434:
$(document).keydown(function(e) { if (e.which == 32) { return false; } });
In your document listener, only return false if the target of the event is not a textarea:
$(document).keydown(function(e) {
if (e.which == 32 && e.target.tagName !== 'TEXTAREA') {
return false;
}
});
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
Or, to additionally permit spaces in inputs:
$(document).keydown(function(e) {
if (e.which == 32 && !['TEXTAREA', 'INPUT'].includes(e.target.tagName)) {
return false;
}
});
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
<input>
I am using the following code to play/pause html5 audio player using the button \:
$(document).keypress(function(e) {
var video = document.getElementById("myAudio");
// \
if ((e.which == 92) || (e.keyCode==92)) {
if (video.paused)
video.play();
else
video.pause();
}
});
I want to add keyboard shortcuts to step back 5 seconds (using ctrl+left arrow) or jump forward 5 seconds (using ctrl+right arrow) from the current location.
I have a script, but I am not sure how to edit it to do that:
let toggleChecked, toggleEnabled, observer, dirVideo, settings = {
skip: 5,
};
skipLeft: function(v,key,ctrl){
v.currentTime -= settings.skip;
},
skipRight: function(v,key,ctrl){
v.currentTime += settings.skip;
},
Here is a jsfiddle with the first script: https://jsfiddle.net/12jpk4L0/
Your js need to look like this
var video = document.getElementById("myAudio");
$(document).keypress(function(e) {
// \
if ((e.which == 92) || (e.keyCode==92)) {
if (video.paused)
video.play();
else
video.pause();
}
});
$(document).keydown(function(e) {
if ((e.which == 37) || (e.keyCode == 37)) {
if (video.currentTime - 5 > 0) {
video.currentTime -= 5;
}
}
if ((e.which == 39) || (e.keyCode == 39)) {
if (video.currentTime + 5 < video.duration) {
video.currentTime += 5;
}
}
});
Arrow keys are triggered by keydown not keypress function.
I have two buttons on my screen. each one fires a piece of javascript code to enter and exit fullscreen mode.
Button 1: Enter Fullscreen Mode
Button 2: Exit Fullscreen Mode
If I first click on Button 1 it brings me to fullscreen mode and then if I click on Button 2 it'll exit fullscreen mode.
BUT if I enter fullscreen mode using F11 or via chrome menu, unexpectedly Button 2 doesn't work anymore.
Why this happens and how to fix it?
Button 1 code :
goFullscreen();
function goFullscreen() {
var el = document.documentElement,
rfs = el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
rfs.call(el);
}
Button 2 code :
document.webkitCancelFullScreen();
I've tried this with no luck too:
document.webkitExitFullscreen();
You should validate before executing....
function FullScreen(divID) {
fnFullScreen(divID, !IsFullScreen());
}
function IsFullScreen() {
return (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
}
function fnFullScreen(divID, TurnOn) {
if (TurnOn) {
var docElm = $('#' + divID).parent()[0];
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
$('#' + divID).css("min-height", "100vh");
$('.btnFullScreen').html('Exit Full Screen');
} else {
if (document.exitFullscreen) {
document.exitFullscreen().catch(() => { });
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$('#' + divID).css("min-height", "");
$('.btnFullScreen').html('Full Screen');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<div id="div1"> <button class="btnFullScreen" onclick="FullScreen('div1')">Full Screen</button> click to full screen</div>
</div>