How to Open a link (web page) in fullscreen mode, javascript? - 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>

Related

Hovering on blurred video, how to unblur a part of it

After searching for a long time for an answer, here is my question:
How can I reveal a part of a html5 video that is blurred when I hover on it?
Here is some code for HTML:
<div class="container">
<video autoplay muted controls>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
<source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
</video>
<div id="soblurme"></div>
</div>
Here is some code for CSS:
.container { position: relative; }
#soblurme {
position: absolute;
border: 1px solid white;
pointer-events: none;
width: 50px;
height: 50px;
left: 70px;
top: 20px;
/*-webkit-backdrop-filter: blur(0);*/
/*backdrop-filter: blur(0);*/
-webkit-filter: blur(0%);
filter: blur(0%);
}
video {
width: 50%;
cursor: none;
filter: blur(7px) opacity(1);
}
Here is some code for JS:
// just make the div follow the mouse
const mouse = {
x: 0,
y: 0,
dirty: false
};
const blurme = document.getElementById('soblurme');
document.querySelector('.container')
.addEventListener('mousemove', (evt) => {
mouse.x = evt.offsetX;
mouse.y = evt.offsetY;
// recently all UI events are already debounced by UAs,
// but all vendors didn't catch up yet
if( !mouse.dirty ) {
requestAnimationFrame( move );
}
mouse.dirty = true;
});
function move() {
blurme.style.left = (mouse.x - 25) + 'px';
blurme.style.top = (mouse.y - 25) + 'px';
mouse.dirty = false;
}
So, being it blurry, I would like to hover and reveal a part around the pointer so you can see through the blurred div.

How to make one button play several youtube videos in embedded iframes?

I have a few youtube videos embedded in a couple of iframes, and would like to start stop all the videos at once, using only one button. I've tried a few different methods, but just couldn't get it right.
Here is what I got.
main.html:
<!DOCTYPE html>
<html>
<head>
<title>YT Mosaic</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container">
<div class="mosaic">
<iframe id="if1" src="https://www.youtube.com/embed/5mL-OkdM7Tc?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- TRT -->
<iframe id="if2" src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- SKY -->
<iframe id="if3" src="https://www.youtube.com/embed/VBTdNwm5CDY?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- Global News -->
<iframe id="if4" src="https://www.youtube.com/embed/ntmPIzlkcJk?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- Euronews -->
<iframe id="if5" src="https://www.youtube.com/embed/GE_SfNVNyqk?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- DW -->
<iframe id="if6" src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- F24 -->
</div>
<button onclick="iframe1play(); return false;">⏯️</button>
<button onclick="stop();">⏹</button>
<button onclick="playAll();">▶▶ Play All</button>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ifa = []; // array of iframe id's
var ifos = []; // array of iframe YT objects for use elsewhere
// For each iframe you find, add its ID to the ifa array
var iframes = document.querySelectorAll("div.mosaic iframe");
iframes.forEach(function(iframe) {
ifa.push(iframe.id);
});
console.log('[LOG] iframe array:', ifa)
// Array(6) [ "if1", "if2", "if3", "if4", "if5", "if6" ]
// Once the YouTube API is ready, for each iframeId in your array,
// create a new YT player and give it the onReady event.
function onYouTubeIframeAPIReady() {
ifa.forEach(function(iframeId) {
var player = new YT.Player(iframeId, {
events: {
'onReady': onPlayerReady,
}
});
});
}
function onPlayerReady(event) {
var ifo = event.target;
ifos.push(ifo); // Push current iframe object to ifo array
ifos.forEach(function(j) {
j.setVolume(30);
j.playVideo();
j.unMute();
});
}
var player;
// WARNING this need to be commented out as it interferes with the other version.
function onYouTubeIframeAPIReady() {
player = new YT.Player('if1', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': catchError
}
});
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000); // wait 6 s. before stopping player
done = true;
}
}
function catchError(event) {
if (event.data == 2) console.log("[LOG] Error: The request contains an invalid parameter value.");
if (event.data == 5) console.log("[LOG] Error: content cannot be played in an HTML5 player.");
if (event.data == 100) console.log("[LOG] Error: Video doesn't exists (or has been removed)!");
if (event.data == 101) console.log("[LOG] Error: Not allowed to be played in an embedded player.");
if (event.data == 150) console.log("[LOG] Error: Not allowed to be played in an embedded player.");
// This should never happen!
console.log("Error:\n", event);
}
// This was a test, not working, trying to use:
// onload="p1=new YT.Player(this);">
function playAll() {
var ifs = [p1,p2,p3,p4,p5,p6];
for(var i=0; i<ifs.length; i++) {
console.log("Try to Play: ", toString(ifs[i]));
ifs[i].playVideo();
}
}
function play() {
//player.unMute();
player.playVideo();
//show_video_url();
}
function pause() { player.pauseVideo(); }
function stop() { player.stopVideo(); }
function stopVideo() { player.stopVideo(); }
function mute() { player.unMute(); }
function iframe1play() {
if (player.getPlayerState() == YT.PlayerState.PLAYING) {
player.pauseVideo();
document.getElementById("if1").style.opacity = "0.7";
} else {
player.playVideo();
document.getElementById("if1").style.opacity = "1";
}
}
</script>
</body>
<footer>FTSE</footer>
</html>
and here is the CSS file main.css:
body {
background-color: #404040;
color: lightgrey;
margin: 0;
padding: 1em;
/*height: 100vh;*/
box-sizing: border-box;
}
.container {
max-width: 1100px;
/* width: 100%;*/
border: 1px solid black;
padding: 10px;
}
.mosaic {
display: grid;
/* Setup a 2x3 frame: */
/* fr is a fractional unit and 1fr is for 1 part of the available space */
grid-template-columns: 1fr 1fr;
grid-template-rows: 50% 50% 50%;
/*grid-template-rows: 1fr 1fr 1fr;*/
max-width: 1100px; /* 100% */
max-height: 100%; /* 100% */
/*aspect-ratio: 16/9;*/ /* 16/9 */
/* margin: auto; */ /* auto */
margin-bottom: 1em; /* 1em */
/*padding: 2em; */
gap: 5px; /* 1em */
}
iframe {
/* iframe width="560" height="315" */
display: block;
width: 100%;
height: 100%;
aspect-ratio: 16/9; /* */
/*min-width: 350px;*/ /* 350px */
/*min-height: 200px;*/ /* 200px */
background: gray; /* yellow */
border: 1px solid black; /* border: solid red */
margin: 0px; /* */
}
How can I use the iframe id= tag to start all iframe videos using one button?
preferably using JS without additional libraries, such as jQuery.
JSfiddle code
You can use Youtube's IFrame Player API. They have a great documentation here https://developers.google.com/youtube/iframe_api_reference
You can basically control all youtube embed videos by generating it through their API.
A working sample would be down below:
<body>
<div id="container">
<div id="player-5mL-OkdM7Tc"></div> <!-- TRT -->
<div id="player-9Auq9mYxFEE"></div> <!-- SKY -->
<div id="player-VBTdNwm5CDY"></div> <!-- Global News -->
<div id="player-ntmPIzlkcJk"></div> <!-- Euronews -->
<div id="player-GE_SfNVNyqk"></div> <!-- DW -->
<div id="player-h3MuIUNCCzI"></div> <!-- F24 -->
</div>
<button onclick="play()">
Play All
</button>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="main.js" async defer></script>
</body>
let playersObjs = [];
window.onYouTubeIframeAPIReady = () => {
const playerContainers = document.querySelectorAll('div[id^="player"]');
playerContainers.forEach((container) => {
const videoId = container.id.slice(7);
playersObjs.push(new YT.Player(container.id, {
height: '200',
width: '100',
videoId,
playerVars: {
'playsinline': 1
}
}))
})
}
const play = () => {
playersObjs.forEach((player) => {
player.playVideo();
})
}

How to make my website mobile friendly - cant seem to fix with #media queries

I tried using media queries as usual but i dont know what I'm doing wrong.
this is how it looks on desktop:
[Desktop]: https://i.stack.imgur.com/rIQbK.png
and here is what it looks on mobile :
[Mobile]: https://i.stack.imgur.com/Y0JLP.jpg
.
when i comment out the .css file the margins disapear. i dont really know which #media queries to use here.
i want it to be same as the desktop.
triend to change the position and manually adjusting the margins. but nothing works well, first post here. i couldnt find answers on the internet for all day long, hope you could help! thank you in advance..
(it is on top of a video)
// function([string1, string2],target id,[color1,color2])
consoleText(['נשבר לכם המסך?', 'הטלפון נפל למים?', 'הטלפון אינו נטען?'], 'text', ['white', 'red', 'black']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function () {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function () {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function () {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function () {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;
} else {
con.className = 'console-underscore'
visible = true;
}
}, 400)
}
#myVideo {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#myVideo video {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
.console-container {
font-size:4em;
text-align:center;
height:200px;
width:600px;
display:block;
position:absolute;
color:white;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
text-shadow:
2px 2px #ffffff,
4px 4px #000000;
}
<section class="banner embed-responsive-item">
<video autoplay muted loop id="myVideo">
<source src="https://mobilefixexperts.com/wp-content/uploads/2018/01/mobile-repair-experts-video.mp4"
type="video/mp4">
</video>
<div style='direction: rtl;' class='console-container float-end'><span id='text'></span>
<div class='console-underscore' id='console'>_</div>
</div>
<a id="a" class="btn btn-primary btn-lg float-end" href="#" role="button">צור קשר</a>
<!-- <h2 class="float-end display-1" style='direction: rtl;'>מה תרצו לתקן היום?</h2>
<a id="a" class="btn btn-primary btn-lg float-end" href="#" role="button">צור קשר</a> -->
</section>
the css code is :
.console-container {
font-size:4em;
text-align:center;
height:200px;
width:600px;
display:block;
position:absolute;
color:white;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
text-shadow:
2px 2px #ffffff,
4px 4px #000000;
}
This is a common problem I have faced it too.
The thing that is doing this is the large text, you may see that the website starts messing up when the large text touches the right side of the screen. So, the solution to tackle this problem is to make that text responsive means it should not touch the side it should become smaller so you can do like:
#media screen and (max-width: 425px) { //Note where it starts happening
#text {
font-size: 3em; //small than what it was before
}
}
If I understand the question you wannt to remove the margin on mobile/small screens?
This css will do it:
#media screen and (max-width:500px) { body{margin:0;} }
Add position: relative; to your banner class and then you can use the media query you want.
.banner{
position: relative;
}

Hide element after transform on hover?

I have a video player transforming to display at the bottom of the video on hover.
How can I hide the div again after 3 seconds of the video time, even when hovering over the video?
.video-block {
display: flex;
}
.box-btns {
position: absolute;
display: flex;
flex-wrap: wrap;
bottom: 0;
width: 100%;
background-color: rgba(54, 91, 160, 0.56);
z-index: 2;
flex: 1;
transform: translateY(100%);
transition: transform 0.9s;
}
.video-block:hover {
transform: translateY(0%);
transition: transform 0.2s;
}
<div class="video-block">
<video id="main-video" src="../css/abc.mp4"></video>
<div class="media-box">
<div class="box-btns">
<button onclick="playVideo()" class="play-btn">
<i class="ion-play"></i>
</button>
<button onclick="pauseVideo()" class="pause-btn">
<i class="ion-pause"></i>
</button>
</div>
</div>
</div>
If I assume well you want to hide the controls after certain seconds of moving the mouse over rather than after playing. Otherwise you would not be able to pause the video.
I am going to use JavaScript for this. First of all added the mousemove event to add and remove the class responsable of showing the button controls instead of using CSS. I add the box-btns--visible class to the video controls whenever there is a mouse movement over the video. Then I create a 3 seconds timer to remove the box-btns--visible class from the controls, but if I move the mouse before the timer ends I reset the timer. I added the play and pause events and an open source video for you to play around. You can visit this documentation links for better understanding.
HTMLMediaElement
Mouse over event It is not the same event but it has a good example related to your use case
const playButton = document.querySelector('.play-btn');
const pauseButton = document.querySelector('.pause-btn');
const video = document.getElementById('main-video');
const controls = document.querySelector('.box-btns');
let timer;
function hideControls() {
timer = setTimeout(() => controls.classList.remove('box-btns--visible'), 3000);
}
function preventHideControls() {
clearTimeout(timer);
}
video.addEventListener('mousemove', function(e) {
controls.classList.add('box-btns--visible');
preventHideControls();
hideControls();
});
playButton.addEventListener('click', async function(e) {
try {
await video.play();
playButton.setAttribute('disabled', '');
pauseButton.removeAttribute('disabled');
} catch (err) {
playButton.removeAttribute('disabled');
}
});
pauseButton.addEventListener('click', async function(e) {
try {
await video.pause();
pauseButton.setAttribute('disabled', '');
playButton.removeAttribute('disabled');
} catch (err) {
pauseButton.removeAttribute('disabled');
}
});
.video-block {
display: flex;
width: 300px;
height: 100px;
background-color: red;
position: relative;
overflow: hidden;
}
.box-btns {
position: absolute;
display: flex;
flex-wrap: wrap;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
background-color: rgba(54, 91, 160, 0.56);
z-index: 2;
flex: 1;
transform: translateY(100%);
transition: all 0.9s ease;
}
.box-btns--visible {
transform: translateY(0%);
transition: transform 0.2s;
opacity: 1;
}
.playing {
background-color: black;
color: white;
}
<div class="video-block">
<video id="main-video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
<div class="media-box">
<div class="box-btns">
<button class="play-btn">
Play
</button>
<button class="pause-btn" disabled>
Pause
</button>
</div>
</div>
</div>
I will show you some example so I think you can get some Idea of that
I used JQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
This part show video on the webpage
<video width=640 muted src="CotswoldSequence1.mov" id="playvid" ontimeupdate="getvidtime(this)"></video>
I use this part to get the current time of the video
ontimeupdate="getvidtime(this)"
This one show you current time of the video during the playing
function getvidtime(event) {
getCurrentTime = Math.trunc(event.currentTime);
document.getElementById("demo").innerHTML = getCurrentTime;
}
This one is show the time when you move the mouse over the video
$('#myvid').mouseenter(function(){
$( ".demox" ).text(getCurrentTime);
});
This section when you move mouse on the video button will be show otherwise it will be hide
$('#myvid').mouseenter(function(){
$('#playbtn').show();
});
$('#myvid').mouseleave(function(){
$('#playbtn').hide();
});
In this section when click the button if ID equel to button ID video will be play and after 3sec button hide as well as when you move mouse out of the the video and then move mouse on the video you can see the which second mouse move on the video " $( ".demox" ).text(getCurrentTime);" and after 3sec buttton hide
$('#playbtn').click(function(){
if(this.id == 'playbtn'){
$('#playvid')[0].play();
setTimeout(() => {
$('#playbtn').fadeOut();
}, 3000);
$('#myvid').mouseenter(function(){
$( ".demox" ).text(getCurrentTime);
setTimeout(() => {
$('#playbtn').hide();
}, 3000);
});
}
});
Here is the full code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<div class = container style="max-width: 640px;" id="myvid">
<video width=640 muted src="CotswoldSequence1.mov" id="playvid" ontimeupdate="getvidtime(this)"></video>
<div>
<button class=controls id="playbtn" style="position: fixed; top: 332px; left: 12px;">Play/pause</button>
</div>
<p>Playback position: <span id="demo"></span></p>
Mouseenter position: <p class="demox"></p>
</div>
<script>
var getCurrentTime;
function getvidtime(event) {
getCurrentTime = Math.trunc(event.currentTime);
document.getElementById("demo").innerHTML = getCurrentTime;
}
$(document).ready(function(){
$('#myvid').mouseenter(function(){
$('#playbtn').show();
});
$('#myvid').mouseleave(function(){
$('#playbtn').hide();
});
$('#playbtn').click(function(){
if(this.id == 'playbtn'){
$('#playvid')[0].play();
setTimeout(() => {
$('#playbtn').fadeOut();
}, 3000);
$('#myvid').mouseenter(function(){
$( ".demox" ).text(getCurrentTime);
setTimeout(() => {
$('#playbtn').hide();
}, 3000);
});
}
});
});
</script>
I used settimeout because it give same time for the video time
you can use your own video to src="CotswoldSequence1.mov" here
copy this code and past to your editor and run see whats happen!
I think you can get some idea!

Display an image on a button with javascript

I create a music play/pause button with HTML, CSS and Javascript and would like the icon to change when the music is played or paused. Here's the JSFiddle: https://jsfiddle.net/gp7yf1t3/5/
HTML:
<audio id="player">
<source src='https://audio.jukehost.co.uk/c926ef6560961d5fd02e35e1488a5997e8217bc1/1a1c12c319a' type='audio/mpeg'/>
</audio>
<button id="button"></button>
CSS:
#button {
background-image: url(https://i.imgur.com/laKFwvv.png);
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-position: center;
border: 0;
border-radius: 50%;
background-color: rgba(0,0,0,0.25)
}
#button:active { background-color: rgba(255,255,255,0.25); }
body { background: red; }
The current icon is a pause icon, but it's supposed to be a play icon. I also added "pause" when it's pause but I want to make it an icon instead.
Javascript:
var button = document.getElementById("button");
var audio = document.getElementById("player");
button.addEventListener("click", function(){
if(audio.paused){
audio.play();
button.innerHTML = "test";
} else {
audio.pause();
button.innerHTML = "test";
}
});
I tried it with symbol characters but it didn't look really nice and would resize because the symbols weren't the same size. I'd like the button to look nice. My only option right now is to add a play/pause button that doesn't change.
You can insert an <img> tag inside the button like so:
button.addEventListener("click", function(){
if(audio.paused){
audio.play();
buttons.innerHTML = '<img src="https://i.imgur.com/laKFwvv.png" />';
} else {
audio.pause();
buttons.innerHTML = '<img src="https://some/play/icon.png" />';
}
});
in this example i using button tag
var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
audio = new Audio();
audio.src = "https://www.soundjay.com/free-music/midnight-ride-01a.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
// Add Event Handling
playbtn.addEventListener("click",playPause);
// Functions
function playPause(){
if(audio.paused){
audio.play();
playbtn.style.background = "url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(https://image.flaticon.com/icons/svg/148/148744.svg) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{ background:url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat;
width:10%;
height:100px;
display: block;
margin: auto;
}
<html>
<body>
<button id="playpausebtn"></button>
</body>
</html>
You are using a background image, so you can simply swap that image using button.style.backgroundImage = 'url(./path/to/image.png)', like so:
var button = document.getElementById("button");
var audio = document.getElementById("player");
button.addEventListener("click", function(){
if(audio.paused){
audio.play();
button.style.backgroundImage = 'url(https://i.imgur.com/laKFwvv.png)';
} else {
audio.pause();
button.style.backgroundImage = 'url(./path/to/image/play.png)';
}
});
#button {
background-image: url(https://i.imgur.com/laKFwvv.png);
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-position: center;
border: 0;
border-radius: 50%;
background-color: rgba(0,0,0,0.25)
}
#button:active { background-color: rgba(255,255,255,0.25); }
body { background: red; }
<audio id="player">
<source src='https://audio.jukehost.co.uk/c926ef6560961d5fd02e35e1488a5997e8217bc1/1a1c12c319a' type='audio/mpeg'/>
</audio>
<button id="button"></button>

Categories

Resources