I'm trying to create a small project with video sprites, modeled after this JSFiddle for audio sprites.
Playback works as expected: clicking on the relevant buttons play the relevant portions of the video.
Now, however, I would like to incorporate something that would make the video play in full screen (or full window) when the button is pressed or when a key is pressed. The demo here, for example shows an approach where if you click Enter while the video is playing, it will enter full-screen mode.
I'm not particularly experienced with JavaScript, so it's likely that the solution is staring me right in the face on how to integrate the approach shown in the Mozilla article, but I'm stumped.
Here's what I have right now, which creates the video sprites, as expected:
var videoSprite = document.getElementById('bbb');
// sprite data
var spriteData = {
full: {
start: 0,
length: 595
},
tentotwenty: {
start: 10,
length: 10
},
tentothirty: {
start: 10,
length: 20
},
fiftytoonefifty: {
start: 50,
length: 200
}
};
// current sprite being played
var currentSprite = {};
// time update handler to ensure we stop when a sprite is complete
var onTimeUpdate = function() {
if (this.currentTime >= currentSprite.start + currentSprite.length) {
this.pause();
}
};
videoSprite.addEventListener('timeupdate', onTimeUpdate, false);
// in mobile Safari, the first time this is called will load the audio. Ideally, we'd load the audio file completely before doing this.
var playSprite = function(id) {
if (spriteData[id] && spriteData[id].length) {
currentSprite = spriteData[id];
videoSprite.currentTime = currentSprite.start;
videoSprite.play();
}
};
<video id="bbb">
<source src="https://ia700408.us.archive.org/26/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
</video>
<br />
<br />
<ul>
<li>
<button onclick="playSprite('full');">Play full video</button>
</li>
<li>
<button onclick="playSprite('tentotwenty');">Play from 10 to 20 seconds</button>
</li>
<li>
<button onclick="playSprite('tentothirty');">Play from 10 to thirty seconds</button>
</li>
<li>
<button onclick="playSprite('fiftytoonefifty');">Play from 50 to 200 seconds</button>
</li>
</ul>
Any tips on how to extend this to go full screen or full window would be greatly appreciated!
I use the code which exists in MDN and modify it to have toggle full screen it means when press enter the video can be full screen if it is not and reverse that.
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
if (!state) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
You only need to call toggleFullScreen() function when buttons is clicked.
When I press enter it restarts the video. Why??
When you click on the buttons(you focus on that button), the video makes full screen and when you press enter again the video exit from full screen mode and then the focused element(the button which was already clicked) click again so it restarts the video.
Now, I understand what happening. What is the solution?
You only need to call blur() function to remove focus from the element.
HTML
<button onclick="playSprite(this,'full');">Play full video</button>
<button onclick="playSprite(this,'tentotwenty');">Play from 10 to 20 seconds</button>
<button onclick="playSprite(this,'tentothirty');">Play from 10 to thirty seconds</button>
<button onclick="playSprite(this,'fiftytoonefifty');">Play from 50 to 200 seconds</button>
Javascript
function(currentElement,id) {
currentElement.blur();
//your code
}
What is this?
Every time, when playSprite function is called(playSprite(this, YourdesireTime)), the current clicked element pass to function to understand which button is clicked and remove focus from the clicked element.
What is different between your answer and #cviejo's answer?
My answer
has toggling functionality
doesn't reset the video
doesn't optimize(I think you don't like to change your code)
#cviejo's answer
optimize your code
Note: I don't want to say #cviejo's answer is not good because he really minimize your code.
Conclusion
You can combine my code and #cviejo's code for getting better result.
Codepen
Related
My code is working, but it's incredibly verbose and I know that it can be made more compact. I just don't know how :-)
I'm building an audio portfolio. When a button is clicked, a sequence of events happens. When another button is clicked, all other active buttons are killed and the sequence for that specific button runs.
The buttons are invisible and are placed on a visualisation of a switch. When clicked, an image of the switch flicked into its "activated" state has its class of "display: none" removed. That should give the user the impression that actually flicking a switch starts playing audio.
Like so:
$(function(){
// FIRST BUTTON
$('.button01').click(function() {
if ($('.switch01').hasClass('activated')){
// So if button.button01 is clicked and img.switch01 has class "activated"
// Kill all audio
$('audio').each(function(){ this.pause(); this.currentTime = 0; });
// Turn this switch off
$('.switch01').removeClass('activated');
// Kill all info cards showing the playback controls
$('.audio-info-card').addClass('d-none');
} else {
// If button.button01 is clicked and img.switch01 DOESN'T have class "activated"
// Turn all other switches off
$('.switch02, .switch03').removeClass('activated');
// Kill all info cards
$('.audio-info-card').addClass('d-none');
// Activate this switch and info card
$('.switch01').addClass('activated');
$('.audio-info-card#card01').removeClass('d-none');
// Kill all audio
$('audio').each(function(){ this.pause(); this.currentTime = 0; });
// Start this audio
$('#audio01-player')[0].play();
}
});
// SECOND BUTTON
$('.button02').click(function() {
if ($('.switch02').hasClass('activated')){
// So if button.button02 is clicked and img.switch02 has class "activated"
// Kill all audio
$('audio').each(function(){ this.pause(); this.currentTime = 0; });
// Turn this switch off
$('.switch02').removeClass('activated');
// Kill all info card showing the playback controls
$('.audio-info-card').addClass('d-none');
} else {
// If button.button02 is clicked and img.switch02 DOESN'T have class "activated"
// Turn all other switches off
$('.switch01, .switch03').removeClass('activated');
// Kill all info cards
$('.audio-info-card').addClass('d-none');
// Activate this switch and info card
$('.switch02').addClass('activated');
$('.audio-info-card#card02').removeClass('d-none');
// Kill all audio
$('audio').each(function(){ this.pause(); this.currentTime = 0; });
// Start this audio
$('#audio02-player')[0].play();
}
});
There are 16 buttons. I realize this code is stupid but JS / jQuery isn't my strong suit :-D
Fortunately, the code works, but any help making this simpler would be greatly appreciated!
You could assign the click() event for all buttons with a class name starting with button like this:
$('button[class^="button"]').click(function() {
let buttonNr = $(this).attr("class").substr(6);
if ($('.switch' + buttonNr).hasClass('activated')) {
$('audio').each(function() {
this.pause();
this.currentTime = 0;
});
$('.switch' + buttonNr).removeClass('activated');
$('.audio-info-card').addClass('d-none');
} else {
$('[class^="switch"]').removeClass('activated');
$('.audio-info-card').addClass('d-none');
$('.switch' + buttonNr).addClass('activated');
$('.audio-info-card#card' + buttonNr).removeClass('d-none');
$('audio').each(function() {
this.pause();
this.currentTime = 0;
});
$('#audio' + buttonNr + '-player')[0].play();
}
});
I'm making a biking simulator where a user can pedal on a device, and their pedaling makes a video play. I want to add a pause screen which pauses the video while the screen is up.
Right now, I have a pause screen that when the div it's in appears, the video pauses, but if the user continues pedaling after the pause screen is up, the video will start to play again in the background.
This is what I'm using to display the pause screen and pause the video. The function gets called when the user pushes a button.
function togglePause() {
var paused = document.getElementById("pauseScreen");
if (paused.style.display == "none") {
paused.style.display = "block";
} else {
paused.style.display = "none";
}
var vid = document.getElementById("video");
vid.pause();
}
The pedaling device works like a bluetooth keyboard, where it sends a keypress events with each pedal rotation.
$(document).keypress(function (event) {
console.log(String.fromCharCode(event.which));
if ('p'.indexOf(String.fromCharCode(event.which)) !== -1) {
video.play();
I'd like to make it so as long as the div is displaying, the video cannot be played. Thanks!
Instead of directly starting the video inside
if ('p'.indexOf(String.fromCharCode(event.which)) !== -1)
you can first check if the div's .display property is set to block and in case it is don't play the video.
if ('p'.indexOf(String.fromCharCode(event.which)) !== -1) {
if (document.getElementById("pauseScreen").style.display != "block") {
video.play();
}
}
I am using the following code to play sound when user receives a message AND the user is not in the tab mean that the current tab is INACTIVE or user is outside current tab.
$(window).hover(function(event) {
if (event.fromElement) {
console.log("inactive");
} else {
console.log("active");
beep("beep.wav", 1.0); //your code here
}
});
I want to play the sound only when user is away from tab and NOT when he is inside the tab. Right now the sound only plays when the user comes back to the tab. This is not what i want.
I can see facebook and gmail does this even if user is outside in another tab, How do they do it?
I searched on SO but couldn't find any answer for this!
Help me!
I imagine something like:
var intervalHandler = null;
$(window).blur(function(e) {
intervalHandler = window.setInterval(function() {
document.getElementById('beep').play();
window.clearInterval(intervalHandler);
}, 1000);
});
$(window).focus(function(e) {
window.clearInterval(intervalHandler);
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<audio id="beep" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
Found from SO myself:
They disable the sound when user tab is active:
var isactive = false;
function playSound(){
if (isactive) return;
playWav...;
}
onNotificaitonComes = playSound;
$(window).focus(function(){
isactive = true;
}).blur(function(){
isactive = false;
});
I am facing an issue while playing audio in chrome when audio.src is not called preceeding to play call. However, firefox plays it alright. Can someone pls suggest? Below is the fiddle link -
http://jsfiddle.net/vn215r2d/1/
One can also find the code over here -
<html>
<head>
<script language="javascript">
var audioo = document.createElement("audio");
function newCall() {
audioo.src = "";
audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
audioo.play();
}
function playAgain() {
audioo.play(); // doesn't work in chrome :(
}
</script>
</head>
<body>
<button type="button" onClick="newCall()">New Captcha Call</button>
<br>
<button type="button" onClick="playAgain()">Replay Captcha</button>
</body>
</html>
Update
Oh waw, apparently is comes down to the audio.currentTime not being writeable until you rewrite the src. Heres what you can do and it does work:
function newCall() {
audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
// make all audio attributes writeable again by resetting the src
audioo.src = audio.src;
}
The answer took a bit of googling, but I got it from here: https://stackoverflow.com/a/14850353
Original
I tested on Chrome with resetting the audio position and it worked. Its safest to pause first, but it works either way.
var audioo = document.createElement("audio");
// Lets add an event listener to play when we are ready to start playing
audioo.addEventListener("canplaythrough", function(){
audioo.play();
}, false);
function newCall() {
audioo.src = "";
audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
}
function playAgain() {
// Let's check if we are ready enough to play
if(audioo.readyState === 4){
audioo.pause(); // first pause
audioo.currentTime = 0; // then reset
audioo.play(); // then play
} else {
// else inform us that we are not ready to play yet.
alert("Audio not ready yet.");
}
}
Here are two fun resources that can help:
MDN:
MediaElement (usefull properties and functions)
MDN:
Media Events (for event listeners)
I somehow managed to put two options in one button: when clicking, the video starts to play and enters full screen at the same time.
This is the html:
<video id="video1" class="video-small">
<source src="video/Marinela+Pinguinos-HD.mp4" type="video/mp4" class="video-file">
<source src="video/Marinela_Pinguinos-HD.webm" type="video/webm" class="video-file">
</video>
<button id="play" class="full-play-button" onclick="vidplay(); goFullscreen('video1')">Play fullscreen</button>
JAVASCRIPT:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
}
So far things go smooth. When entering full screen, there's a default player-like thing at the bottom, with a button offering the possibility to exit full screen.
What I would like to achieve is to be able to pause the video when clicking that button, but I have no idea how.
What I can think of is some kind of a function that detects if we're full screen or not, and if we're not, it would pause/stop (not sure which I prefer yet) the video.
This is what came to my mind, but I'm really a newbie in JS and it doesn't work:
function exitPause() {
var video = document.getElementById("video1");
if (document.exitFullscreen) {
video.pause();
}
else if (document.mozCancelFullScreen) {
video.pause();
}
else if (document.webkitExitFullscreen) {
video.pause();
}
else if (element.msExitFullscreen) {
video.pause();
}
}
What am I doing wrong? How can I make it happen?
Use fullscreenchange event handler:
video.addEventListener(
'fullscreenchange',
function(event) {
if (!document.fullscreenElement) {
video.pause();
}
},
false
);
Note: care for vendor prefixes.
Thanks to Igor Gilyazov I managed to go a bit further. This is how the code looks now:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
video.addEventListener(
'webkitfullscreenchange',
function(event) {
if (!document.fullscreenElement && video.paused) {
video.play();
}
else {
video.pause();
}
},
false
);
}
and going full screen:
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
What happens now is when I first click the button, it goes full screen and the video plays. When going back to small screen, it pauses.
This is great.
Unfortunately it happens only every second time (the next time it keeps being paused no matter if going full or small, then right again, then wrong and so on).
I know I'm close, but it's not fully working yet, any ideas for modifications?