Develop Reference

How to Open a link (web page) in fullscreen mode, javascript?

simply I need to open a new page in fullscreen.
So, users press a button and then a video (hidden on main page) is open in fullscreen and start to play. When user press button to close fullscreen or press "esc" key, video will pause, fullscreen is closed and iframe is not visible...
I'm try to get this demo works, but with no results.
Also I can make it works only if I open only the video element, not iframe...
const fullscreen = document.querySelector('.playnow');
const video = document.querySelector('#myvideo');
fullscreen.addEventListener('click', toggleFullScreen);
// Create fullscreen video button
function toggleFullScreen() {
if(video.requestFullScreen){
video.requestFullScreen();
} else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
} else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
};
video.classList.remove("d-none");
}
body{
margin:0;
padding:0;
}
.video-container{
width:100%;
height:100vh;
margin: 0 auto;
position:relative;
background-image: url(https://images.unsplash.com/photo-1616485828923-2640a1ee48b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
#myvideo{
}
.d-none{
display:none;
}
<div class="video-container">
<button class="playnow">Open Video in Fullscreen Mode</button>
<video width="100%" autoplay id="myvideo" class="d-none">
<source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
I've tried:
https://gomakethings.com/how-to-play-a-video-in-full-screen-mode-when-its-thumbnail-is-clicked-with-vanilla-js/ (better demo, but video still visible after fullscreen is closed...)
https://www.hongkiat.com/blog/html5-fullscreen-api/
But no appreciable results.
Thank you, Luca

I think you can try something like that.
const btn = document.querySelector('button')
const screenWidth = window.screen.availWidth;
const screenHeight = window.screen.availHeight
function openFullscreenWindow() {
window.open('https://github.com', '_blank', `width=${screenWidth},height=${screenHeight}`)
}
btn.addEventListener('click', openFullscreenWindow)
<button>Open fullscreen</button>

Maybe a found a solution reading this post on medium: https://medium.com/#roidescruzlara/controlling-the-full-screen-mode-cda0fae4c4f2
And now I can use it as I need.
Thank you so much.
var currentWindowHeight = window.innerHeight;
var element = document.getElementById("container");
var btn = document.getElementById("btn-screen-mode");
var film = document.getElementById("film");
var isFullScreen = false;
window.addEventListener("keydown", useCustomFullScreen.bind(this));
window.addEventListener("resize", isExitingFullScreen.bind(this));
/**
* Gets available exitFullscreen method
*/
function getRequestFullScreen() {
return (
element.requestFullscreen ||
element["mozRequestFullscreen"] ||
element["msRequestFullscreen"] ||
element["webkitRequestFullscreen"]
);
}
/**
* Gets available requestFullscreen method
*/
function getExitFullscreen() {
return (
document["webkitExitFullscreen"] ||
document["msExitFullscreen"] ||
document.exitFullscreen
);
}
/**
* Prevents browser to enter the default fullscreen mode and uses the custom fullscreen method
*/
function useCustomFullScreen(event) {
if (event.key === "F11") {
event.preventDefault();
toggleFullScreen();
}
}
/**
* Detects if the browser is exiting fullscreen mode when window resize
*/
function isExitingFullScreen() {
if (isFullScreen && currentWindowHeight >= window.innerHeight) {
isFullScreen = false;
currentWindowHeight = window.innerHeight;
// Do your full screen mode stuff
updateBtn();
}
}
/**
* Update button appearance according to the current screen mode
*/
function updateBtn() {
if (isFullScreen) {
btn.classList.remove("enter-fullscreen");
btn.classList.add("exit-fullscreen");
element.classList.remove("d-none");
film.play();
return;
}
btn.classList.remove("exit-fullscreen");
btn.classList.add("enter-fullscreen");
element.classList.add("d-none");
film.pause();
}
/**
* Toggles the fullscreen mode using available fullscreen API
*/
function toggleFullScreen() {
if (!isFullScreen && getRequestFullScreen()) {
getRequestFullScreen().call(element);
} else {
getExitFullscreen().call(document);
}
currentWindowHeight = window.innerHeight;
isFullScreen = !isFullScreen;
// Do your full screen mode stuff
updateBtn();
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.intro{
width:100%;
height:100vh;
}
.intro video{
max-width:100%;
height:auto;
object-fit: cover;
}
.d-none{
display:none;
}
#btn-screen-mode {
width: 30px;
height: 30px;
border-radius: 5px;
border: 0;
padding: 0;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.enter-fullscreen {
position: absolute;
top:0;bottom:0;left:0;right:0;
margin: auto;
z-index:2322333;
background-image: url(https://cdn.icon-icons.com/icons2/1674/PNG/512/expand_111060.png);
}
.exit-fullscreen {
border: 2px solid #000;
position: absolute;
top:20px;
right:20px;
z-index:2322333;
background-image: url(https://cdn.icon-icons.com/icons2/1673/PNG/512/collapseoutline_110793.png);
}
<div class="intro">
<button id="btn-screen-mode" class="enter-fullscreen" onclick="toggleFullScreen()"></button>
<video autoplay loop muted playsinline="true" webkit-playsinline="true">
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
</video>
</div>
<div class="container d-none" id="container">
<button id="btn-screen-mode" class="exit-fullscreen" onclick="toggleFullScreen()"></button>
<video loop playsinline="true" webkit-playsinline="true" id="film">
<source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
</video>
</div>

When I touch my JavaScript slider on mobile, I can't scroll down the page

I've built a slider using pure JavaScript. On mobile screen when I touch the slider I can only change slides but can not scroll down the page.
Under the hood when the slider element is touched, a "touchstart" event fires and the corresponding event handler function, features event.preventDefault() to stop scrolling the page, then when "touchmove" event fires, the code uses difference between first and new horizontal coordinates and CSS left propery to move the slider.
I made a minimal code below. Also click to see code on online editor.
const slides = document.querySelector(".slides");
let posX1, posX2, dX;
slides.addEventListener("touchstart", dragStart);
slides.addEventListener("touchmove", dragAction);
function dragStart(e) {
e.preventDefault();
posX1 = e.touches[0].clientX;
}
function dragAction(e) {
posX2 = e.touches[0].clientX;
dX = posX2 - posX1;
posX1 = e.touches[0].clientX;
slides.style.left = (slides.offsetLeft + dX) + "px";
}
body {
padding-bottom: 1000px;
}
.slider {
width: 200px;
height: 100px;
margin: 0 auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.slides {
width: 600px;
height: 100px;
display: flex;
position: absolute;
}
.slide {
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.slide:nth-child(1) {
background-color: rgb(200, 200, 200);
}
.slide:nth-child(2) {
background-color: rgb(150, 150, 150);
}
.slide:nth-child(3) {
background-color: rgb(100, 100, 100);
}
<!DOCTYPE html>
<html>
<body>
<div class="slider">
<div class="slides">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>
</body>
</html>
Thanks for your time :)

I think nobody has checked my question but me, however, assuming there's a hypothetical person having the same problem as mine, I could fix that:
I figured out how to make a JavaScript slider using this post in which the author has used preventDefault() inside "touchstart" EventListener and I stuck to it, but the solution is to simply call preventDefault() method on "touchmove" event itself not "touchstart", off course if you need (which is if the user's trying to change slides). and if user's trying to scroll the page then remove "touchend" EventListener.
const slides = document.querySelector(".slides");
let posX1,
posX2,
posY1,
posY2,
dX,
dY,
dirDetected = false;
//feature detection
//-------------Note 1-----------//
let passiveIfSupported = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, "passive", {
get: function() {passiveIfSupported = {passive: false};}
}));
} catch(err) {}
slides.addEventListener("touchstart", dragStart, passiveIfSupported);
slides.addEventListener("touchmove", dragAction, passiveIfSupported);
slides.addEventListener("touchend", dragEnd, false);
function dragStart(e) {
posX1 = e.touches[0].clientX;
posY1 = e.touches[0].clientY;
}
function dragAction(e) {
//-------------Note 2-----------//
e.preventDefault();
posX2 = e.touches[0].clientX;
posY2 = e.touches[0].clientY;
dX = posX2 - posX1;
posX1 = e.touches[0].clientX;
dY = posY2 - posY1;
if (!dirDetected) {
if (Math.abs(dY) > Math.abs(dX)) {
slides.removeEventListener("touchmove", dragAction, passiveIfSupported);
return;
}
dirDetected = true;
}
slides.style.left = (slides.offsetLeft + dX) + "px";
}
function dragEnd() {
if (!dirDetected) {
slides.addEventListener("touchmove", dragAction, passiveIfSupported);
}
dirDetected = false;
}
body {
padding-bottom: 1000px;
}
.slider {
width: 200px;
height: 100px;
margin: 0 auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.slides {
width: 600px;
height: 100px;
display: flex;
position: absolute;
}
.slide {
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.slide:nth-child(1) {
background-color: rgb(200, 200, 200);
}
.slide:nth-child(2) {
background-color: rgb(150, 150, 150);
}
.slide:nth-child(3) {
background-color: rgb(100, 100, 100);
}
<!DOCTYPE html>
<html>
<body>
<div class="slider">
<div class="slides">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>
</body>
</html>
Note 1. (addEventListener's third parameter): note the third parameter of addEventListener() method. there's something I realized in my searches from this question. I'm going to use preventDefault() inside "touchmove" EventListener but in some versions of Chrome and Firefox for "touchstart" and "touchmove" events if you don't specify passive property of options object (the third parameter of addEventListener()) the default value would be set to true and this doesn't let the EventListener to call preventDefault() so you have to set the third parameter to {passive: false} but if the browser loading your script is an old one which requires a third boolean parameter for addEventListener() then you need to provide a boolean value not object. So you can use feature detection to provide an appropraite parameter.
Note 2. Firefox and chrom android handle "touchmove" preventDefault() differently: Here's another point I found (from this question), if you run the above code on Chrome Android it works well, you can scroll the page or change slides but on Firefox Android you can't scroll. Actually I think it's a Chrome's fault because according to Specs for "touchmove" event if the first "touchmove" event is prevented the subsequent "touchmove" events bound to the same touch point are prevented and in the code above at the very first line of "touchmove" event handler function I used preventDefault() so I need to call it after the if block so ensure default behaviour is prevented when needed.
const slides = document.querySelector(".slides");
let posX1,
posX2,
posY1,
posY2,
dX,
dY,
dirDetected = false;
//feature detection
let passiveIfSupported = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, "passive", {
get: function() {passiveIfSupported = {passive: false};}
}));
} catch(err) {}
slides.addEventListener("touchstart", dragStart, passiveIfSupported);
slides.addEventListener("touchmove", dragAction, passiveIfSupported);
slides.addEventListener("touchend", dragEnd, false);
function dragStart(e) {
posX1 = e.touches[0].clientX;
posY1 = e.touches[0].clientY;
}
function dragAction(e) {
posX2 = e.touches[0].clientX;
posY2 = e.touches[0].clientY;
dX = posX2 - posX1;
posX1 = e.touches[0].clientX;
dY = posY2 - posY1;
if (!dirDetected) {
if (Math.abs(dY) > Math.abs(dX)) {
slides.removeEventListener("touchmove", dragAction, passiveIfSupported);
return;
}
e.preventDefault();
}
dirDetected = true;
slides.style.left = (slides.offsetLeft + dX) + "px";
}
function dragEnd() {
if (!dirDetected) {
slides.addEventListener("touchmove", dragAction, passiveIfSupported);
}
dirDetected = false;
}
body {
padding-bottom: 1000px;
}
.slider {
width: 200px;
height: 100px;
margin: 0 auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.slides {
width: 600px;
height: 100px;
display: flex;
position: absolute;
}
.slide {
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.slide:nth-child(1) {
background-color: rgb(200, 200, 200);
}
.slide:nth-child(2) {
background-color: rgb(150, 150, 150);
}
.slide:nth-child(3) {
background-color: rgb(100, 100, 100);
}
<!DOCTYPE html>
<html>
<body>
<div class="slider">
<div class="slides">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>
</body>
</html>

How to add a seek slider to html5 video player?

I am trying to create a custom video player, I have managed to add a seek bar now I would like to add a seek slider to my seek bar (video progress bar), meaning, I want something like this.
,
As the above image from Netflix user can slide the red circle back and force, I want the same in my custom player
Here is what I have so far.
Jsfiddle : demo
HTML
<div id="custom-seekbar">
<span></span>
</div>
<video id="video" width="400" controls autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
Js
var vid = document.getElementById("video");
vid.ontimeupdate = function(){
var percentage = ( vid.currentTime / vid.duration ) * 100;
$("#custom-seekbar span").css("width", percentage+"%");
};
$("#custom-seekbar").on("click", function(e){
var offset = $(this).offset();
var left = (e.pageX - offset.left);
var totalWidth = $("#custom-seekbar").width();
var percentage = ( left / totalWidth );
var vidTime = vid.duration * percentage;
vid.currentTime = vidTime;
});//click()
Css
#custom-seekbar
{
cursor: pointer;
height: 10px;
margin-bottom: 10px;
outline: thin solid orange;
overflow: hidden;
position: relative;
width: 400px;
}
#custom-seekbar span
{
background-color: orange;
position: absolute;
top: 0;
left: 0;
height: 10px;
width: 0px;
}
/* following rule is for hiding Stack Overflow's console */
.as-console-wrapper{ display: none !important;}
what do I need to do to achieve what I want?

try something like that.
#custom-seekbar span.hover:after{
content: '■';
display:block;
position: absolute;
background-color: red;
color: red;
top: 0;
right: 0;
}
$("#custom-seekbar").hover(function(){
$(this).find("span").addClass("hover");
}, function(){
$(this).find("span").removeClass("hover");
})
var sliderCanMove = false;
$("#custom-seekbar").on("mousedown", function(){
sliderCanMove = true;
});
$(window).on("mousemove", function(e){
if(sliderCanMove){
var offset = $("#custom-seekbar").offset();
var left = ((e.clientX + offset.left));
var totalWidth = $("#custom-seekbar").width();
var percentage = ( left / totalWidth );
var vidTime = vid.duration * percentage;
vid.currentTime = vidTime;
}
});
$(window).on("mouseup", function(){
sliderCanMove = false;
});
updated fiddle here.

How do I fix my progress bar from glitching?

I am experiencing an issue where the progress bar is behind, if you click THIS LINK and go to the second song you will see that the progress bar is all messed up. If anyone has a solution please help! This is an image of what the problem is. Also this is all the coding I think necessary to solve the problem.
var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
audio.addEventListener("playing", function(_event) {
var duration = _event.target.duration;
advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
clearTimeout(timer);
});
var advance = function(duration, element) {
var progress = document.getElementById("progress");
increment = 10 / duration
percent = Math.min(increment * element.currentTime * 10, 100);
progress.style.width = percent + '%'
startTimer(duration, element);
}
var startTimer = function(duration, element) {
if (percent < 100) {
timer = setTimeout(function() {
advance(duration, element)
}, 100);
}
}
#timeline {
width: 50%;
height: 4px;
background: rgba(0, 0, 0, .3);
margin-top: 27px;
float: left;
margin-left: 10px;
border-radius: 15px;
background-color: blue;
}
/*Grabable Playhead*/
#playhead {
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: -10.9px;
background: black;
}
.progress {
height: 5px;
background: black;
transition: width .1s linear;
}
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
<source src="https://tunechestmusic.000webhostapp.com/sleepy.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div class="progress" id="progress"></div>
<div id="playhead"></div>
</div>
</div>
</div>

It looks like you're missing some key things to make it work
The first thing is that your play button doesn't actually do anything. Try adding an event to handle the clicking of the play button and play the audio
var playButton = document.getElementById('pButton');
playButton.addEventListener('click', e => { audio.play(); });
The second issue I see is that your audio tag is supposed to call initProgressBar but that function doesn't exist.
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
I added a placeholder function for you to fill in. If you don't need this function, remove it from the HTML.
function initProgressBar() {
// TODO: What goes here?
}
After you add the click event in, the audio plays when clicked and the progress bar makes the correct progress. However, your circle doesn't move with the progress. I'm assuming you just haven't gotten that part yet.
var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
var playButton = document.getElementById('pButton');
playButton.addEventListener('click', e => { audio.play(); });
function initProgressBar() {
// TODO: What goes here?
}
audio.addEventListener("playing", function(_event) {
var duration = _event.target.duration;
advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
clearTimeout(timer);
});
var advance = function(duration, element) {
var progress = document.getElementById("progress");
increment = 10 / duration
percent = Math.min(increment * element.currentTime * 10, 100);
progress.style.width = percent + '%'
startTimer(duration, element);
}
var startTimer = function(duration, element) {
if (percent < 100) {
timer = setTimeout(function() {
advance(duration, element)
}, 100);
}
}
#timeline {
width: 50%;
height: 4px;
background: rgba(0, 0, 0, .3);
margin-top: 27px;
float: left;
margin-left: 10px;
border-radius: 15px;
background-color: blue;
}
/*Grabable Playhead*/
#playhead {
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: -10.9px;
background: black;
}
.progress {
height: 5px;
background: black;
transition: width .1s linear;
}
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
<source src="https://tunechestmusic.000webhostapp.com/sleepy.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play">Play</button>
<div id="timeline">
<div class="progress" id="progress"></div>
<div id="playhead"></div>
</div>
</div>
</div>

jitter when using jquery to alter background-position

Here's the jsfiddle.
It's the interface to cropping an image. As you can see the selection div takes the same background image and positions it to the negative of the top and left attributes of the selection div. In theory this should give a perfect overlap, but there's a jitter as you move the selection div around, and I can't seem to figure out what is causing it.
html
<div id="main">
<div id="selection"></div>
</div>
css
#main {
width: 600px;
height: 450px;
position: relative;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
background-size: contain;
}
#selection {
width: 100px;
height: 100px;
position: absolute;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
border: 1px dotted white;
background-size: 600px 450px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
selection.css("background-position", (((-selection.position().left) - 1) + "px " + ((-selection.position().top ) - 1) + "px"));
}
});
$("#selection").mouseup(function (e) {
move = false;
});
})

It would appear that there is a value of 5 offset that needs to be added to ensure seamlessness
DEMO http://jsfiddle.net/nzx0fcp5/2/
offset = [e.pageX - selection.offset().left + 5, e.pageY - selection.offset().top + 5];

So, while experimenting I discovered that this was only a problem at certain sizes of the image. At the original size it is no problem, neither at half nor a quarter of this size. It wasn't simply a matter of keeping the image in proportion not having the image square or using even pixel sizes. I'm assuming this had something to do with partial pixel sizes, but I'm not sure, and I couldn't see any way to work around this, at least none that seemed worth the effort.
So while checking out the code of other croppers I took a look at POF's image cropper, they seem to have got round the problem by not using the background-position property at all (I'm not sure if it's plugin or they coded it themselves). They just set the image down and then used a transparent selection div with 4 divs stuck to each edge for the shading. So there's no pixel crunching on the fly at all. I like the simplicity and lightweight nature of this design and knocked up a version myself in jsfiddle to see if I could get it to work well.
new jitter free jsfiddle with no pixel crunching
I liked the solution for the preview box as well.
html
<body>
<div id="main">
<img src="http://flavorwire.files.wordpress.com/2012/01/scarlett_johansson.jpg" />
<div id="upperShade" class="shade" > </div>
<div id="leftShade" class="shade" > </div>
<div id="selection"></div>
<div id="rightShade" class="shade"></div>
<div id="lowerShade" class="shade" ></div>
</div>
</body>
css
#main {
position:relative;
width: 450px;
height: 600px;
}
#selection {
width: 148px;
height: 148px;
position: absolute;
border: 1px dotted white;
top: 0px;
left: 0px;
z-index: 1;
}
.shade {
background-color: black;
opacity: 0.5;
position: absolute;
}
#upperShade {
top: 0px;
left: 0px;
width: 600px;
}
#leftShade {
left: 0px;
top: 0px;
height: 150px;
width: auto;
}
#rightShade {
left: 150px;
top: 0px;
height: 150px;
width: 450px;
}
#lowerShade {
left:0px;
top: 150px;
width: 600px;
height: 300px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
setShade();
}
});
function setShade() {
$("#upperShade").css("height", selection.position().top);
$("#lowerShade").css("height", 600 - (selection.position().top + 150));
$("#lowerShade").css("top", selection.position().top + 150);
$("#leftShade").css("top", selection.position().top);
$("#leftShade").css("width", selection.position().left);
$("#rightShade").css("top", selection.position().top);
$("#rightShade").css("left", selection.position().left + 150);
$("#rightShade").css("width", 450 - selection.position().left);
}
$("#selection").mouseup(function (e) {
move = false;
});
});