Stop iframe camera from turning on when exiting modal view - javascript

I am trying to make my camera close when I exit out of my modal view when I click on the close button the camera is still on. If you guys can take a look at this let me know how what I should do to get the camera to shut off. I tried different methods but still haven't gotten the camera to shut off. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#iframe-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#iframe-container iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 90%;
border: none;
}
.close-btn {
position: absolute;
top: 200px;
right: 250px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: #333;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<button onclick="showIframe()">Here</button>
<div id="iframe-container">
<div class="close-btn" onclick="hideIframe()">X</div>
<iframe allow="accelerometer; autoplay; clipboard-write; camera; microphone; picture-in-picture" src="url"></iframe>
</div>
<script>
var iframe = document.querySelector("#iframe-container iframe");
function showIframe() {
document.getElementById("iframe-container").style.display = "block";
iframe.contentWindow.navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream) {
iframe.stream = stream;
})
.catch(function(error) {
console.error(error);
});
}
//create a function that forcefully shut off the camera when the closed button is clicked, try another way to do this
function hideIframe() {
document.getElementById("iframe-container").style.display = "none";
if (iframe.stream) {
console.log("Camera stream stopped");
iframe.stream.getTracks().forEach(function(track) {
track.stop();
});
}
}
</script>
</body>
</html>
<style>
button {
background-color: rgb(77, 125, 180);
color: white;
font-size: 24px;
padding: 16px 24px;
border-radius: 10px;
cursor: pointer;
}
</style>
I tried using the iframe function that stops the camera but it still didn't work.
function hideIframe() {
document.getElementById("iframe-container").style.display = "none";
if (iframe.stream) {
console.log("Camera stream stopped");
iframe.stream.getTracks().forEach(function(track) {
track.stop();
});
}
}

Related

How to Open Iframe On Button Click Without jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame

Opening a new screen by clicking the button on the existing screen in HTML

I'm working on make a twitter website. But I can't solve the this problem. When I want to click this button:
I expect a result like this:
Its background will look like this and it will pop a form on the screen. What should I use to solve this problem? I'm not bad with HTML DOM, but I couldn't figure out the algorithm in my head.
An other way for achieving that, would be with a modal box (div) that already exists but will only be displayed after clicking a certain button.
Here's a quick example, I've also added an overlay, which will appear behind the div. If you click on the overlay while the modal box is visible, it will disappear again.
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>
To do that you can use JavaScript or jQuery.
Exemple:
$(".mybutton").click(() => {
$("body").append(`
<div class="modals">
Copy your code here
</div>
`)
})
.modals{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 40px 30px;
background-color: #e2e2e2;
border-radius: 4px;
}
<button class="mybutton">Open</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>

Mouseover event with mousedown

I need your help. There is an APP Virtual-piano. When I click the key, the relevent note is reproduced.If the click is single, everything is fine. But when I hold down the mouse button and lead the cursor over the keys, the sound is not produced. What could be the problem? I suppose that the problem is in function on the line 15. But i don`t know how to fix it. Help me please. Thanks in advance.
This is JS code
const piano = document.querySelector(".piano");
const collectionPiano = document.querySelectorAll(".piano-key");
function setActiveKey(event) { //active status keys mouse event
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
}
function removeActiveKey(event) { //remove active status keys mouse event
event.target.classList.remove("piano-key-active", "piano-key-active-pseudo");
}
function playAudio (note) { //start function playAudio
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}
function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio
if (event.target.classList.contains("piano-key")) {
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
const note = event.target.dataset.note;
playAudio(note);
}
collectionPiano.forEach((el) => {
// el.addEventListener("mouseover", playAudio);
el.addEventListener("mouseover", setActiveKey);
el.addEventListener("mouseout", removeActiveKey);
});
};
function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio
collectionPiano.forEach((el) => {
el.classList.remove("piano-key-active", "piano-key-active-pseudo");
// el.removeEventListener("mouseover", playAudio);
el.removeEventListener("mouseover", setActiveKey);
el.removeEventListener("mouseout", removeActiveKey);
});
};
piano.addEventListener("mousedown", startKeyActive);
piano.addEventListener("mousedown", playAudio);
document.addEventListener("mouseup", stopKeyIActive);
window.addEventListener("keydown", (event) => { // Event keyboard - play audio
if (event.repeat) {
return;
}
const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`);
const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`);
audioKeys.currentTime = 0;
audioKeys.play();
pianoKey.classList.add('piano-key-active');
window.addEventListener("keyup", () => {
pianoKey.classList.remove('piano-key-active');
})
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
}
a:focus {
outline: 0;
}
html {
background: #313940;
}
body {
min-height: 100vh;
background-color: #313940;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: #313940;
overflow-x: hidden;
}
.header {
text-align: center;
width: 100%;
border-bottom: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a);
}
.header-title {
line-height: 60px;
font-weight: 300;
color: #fff;
}
.main {
min-height: calc(100vh - 110px);
padding: 60px 10px 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: space-between;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.btn-container {
display: flex;
justify-content: space-between;
width: 306px;
height: 40px;
margin: 0 auto;
margin-bottom: 80px;
}
.btn {
width: 150px;
height: 40px;
padding: 0 10px;
background-color: #454c53;
border: 0;
border-radius: 2px;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 300;
color: #fff;
outline: 0;
cursor: pointer;
transition: 0.3s;
}
.btn:not(.btn-active):hover {
background-color: #515961;
}
.btn:active {
background-color: #00c9b7;
}
.btn-active {
background-color: #00b4a4;
}
.btn-active:hover {
background-color: #00c9b7;
}
.piano {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
height: 270px;
max-width: 560px;
margin: 0 auto 60px;
}
.piano-key {
position: relative;
width: 80px;
height: 270px;
background-color: rgba(255, 255, 255, 0.85);
border: 4px solid #313940;
border-radius: 0px 0px 12px 12px;
transition: 0.3s;
cursor: pointer;
}
.piano-key:hover {
background-color: #fff;
}
.keys-sharp {
position: absolute;
top: 0;
bottom: 0;
left: 53px;
right: 53px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.piano-key.sharp {
width: 54px;
height: 170px;
background-color: #313940;
border: 0;
border-radius: 0px 0px 9px 9px;
top: 0;
z-index: 3;
pointer-events: auto;
transform-origin: center top;
}
.piano-key.piano-key-active,
.piano-key.sharp.piano-key-active {
transform: scale(0.96);
}
.piano-key.none {
background-color: transparent;
border: 0;
border-radius: 0;
pointer-events: none;
}
.piano-key::before,
.piano-key::after {
content: attr(data-note);
position: absolute;
width: 40px;
height: 40px;
font-size: 26px;
line-height: 40px;
text-align: center;
color: #a2abb3;
bottom: -45px;
left: 20px;
transition: 0.3s;
pointer-events: none;
}
.piano-key::after {
display: none;
content: attr(data-letter);
}
.piano-key:hover::before,
.piano-key:hover::after {
color: #d7dfe6;
}
.sharp:active {
border-top: 0;
}
.piano-key.sharp::before,
.piano-key.sharp::after {
bottom: 175px;
left: 7px;
}
.piano-key.letter::before {
display: none;
}
.piano-key.letter::after {
display: block;
}
.piano-key-letter::before {
content: attr(data-letter);
}
.piano-key-remove-mouse:active::before {
color: #a2abb3;
}
.piano-key-active-pseudo:hover::after,
.piano-key-active-pseudo:hover::before,
.piano-key-active::after,
.piano-key-active::before {
color: #00b4a4;
}
.fullscreen {
position: fixed;
top: 120px;
right: 40px;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.3);
border: 0;
outline: 0;
background-size: contain;
transition: 0.3s;
cursor: pointer;
background-image: url("assets/svg/fullscreen-open.svg");
}
.fullscreen:hover {
background-color: rgba(255, 255, 255, 0.5);
}
:-webkit-full-screen .fullscreen {
background-image: url("assets/svg/fullscreen-exit.svg");
}
.footer {
border-top: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a);
}
.footer-container {
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.github {
display: block;
width: 120px;
height: 45px;
padding-left: 45px;
background-image: url("assets/svg/github.svg");
background-size: 35px;
background-repeat: no-repeat;
background-position: left center;
line-height: 45px;
color: #cbd5de;
font-size: 16px;
font-family: "Open Sans", sans-serif;
transition: 0.3s;
}
.github:hover {
color: #fff;
}
.rss {
display: block;
position: relative;
font-family: "Open Sans", sans-serif;
width: 86px;
height: 32px;
background-image: url("assets/svg/rss.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
padding-right: 111px;
}
.rss-year {
position: absolute;
bottom: 0;
right: 0;
font-size: 21px;
letter-spacing: -2px;
color: #cbd5de;
line-height: 0.9;
font-weight: bold;
transition: 0.3s;
}
.rss:hover .rss-year {
right: -5px;
letter-spacing: 0;
}
#media (max-width: 768px) {
.fullscreen {
top: 10px;
right: 20px;
width: 40px;
height: 40px;
}
}
#media (max-width: 600px) {
.main {
padding-top: 40px;
}
.piano {
width: 310px;
height: 160px;
}
.piano-key {
width: 44px;
height: 160px;
border-radius: 0px 0px 8px 8px;
border: 2px solid #313940;
}
.keys-sharp {
left: 26px;
right: 26px;
}
.piano-key.sharp {
width: 36px;
height: 100px;
border-radius: 0px 0px 6px 6px;
}
.piano-key::before,
.piano-key::after {
width: 30px;
height: 30px;
font-size: 22px;
bottom: -35px;
left: 7px;
font-size: 22px;
}
.piano-key.sharp::before,
.piano-key.sharp::after {
bottom: 115px;
left: 3px;
}
.btn-container {
width: 244px;
height: 40px;
margin-bottom: 80px;
}
.btn {
width: 120px;
height: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/piano.ico" rel="shortcut icon">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Open+Sans:wght#300;400;800&display=swap"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>virtual-piano</title>
</head>
<body>
<header class="header">
<h1 class="header-title">Virtual Piano</h1>
</header>
<main class="main">
<div class="btn-container">
<button class="btn btn-notes btn-active">Notes</button>
<button class="btn btn-letters">Letters</button>
</div>
<div class="piano">
<div class="piano-key" data-key="68" data-letter="D" data-note="c"></div>
<div class="piano-key" data-key="70" data-letter="F" data-note="d"></div>
<div class="piano-key" data-key="71" data-letter="G" data-note="e"></div>
<div class="piano-key" data-key="72" data-letter="H" data-note="f"></div>
<div class="piano-key" data-key="74" data-letter="J" data-note="g"></div>
<div class="piano-key" data-key="75" data-letter="K" data-note="a"></div>
<div class="piano-key" data-key="76" data-letter="L" data-note="b"></div>
<div class="keys-sharp">
<div class="piano-key sharp" data-key="82" data-letter="R" data-note="c♯"></div>
<div class="piano-key sharp" data-key="84" data-letter="T" data-note="d♯"></div>
<div class="piano-key sharp none"></div>
<div class="piano-key sharp" data-key="85" data-letter="U" data-note="f♯"></div>
<div class="piano-key sharp" data-key="73" data-letter="I" data-note="g♯"></div>
<div class="piano-key sharp" data-key="79" data-letter="O" data-note="a♯"></div>
</div>
</div>
<audio data-key="75" data-note="a" src="assets/audio/a.mp3"></audio>
<audio data-key="79" data-note="a♯" src="assets/audio/a♯.mp3"></audio>
<audio data-key="76" data-note="b" src="assets/audio/b.mp3"></audio>
<audio data-key="68" data-note="c" src="assets/audio/c.mp3"></audio>
<audio data-key="82" data-note="c♯" src="assets/audio/c♯.mp3"></audio>
<audio data-key="70" data-note="d" src="assets/audio/d.mp3"></audio>
<audio data-key="84" data-note="d♯" src="assets/audio/d♯.mp3"></audio>
<audio data-key="71" data-note="e" src="assets/audio/e.mp3"></audio>
<audio data-key="72" data-note="f" src="assets/audio/f.mp3"></audio>
<audio data-key="85" data-note="f♯" src="assets/audio/f♯.mp3"></audio>
<audio data-key="74" data-note="g" src="assets/audio/g.mp3"></audio>
<audio data-key="73" data-note="g♯" src="assets/audio/g♯.mp3"></audio>
<button class="fullscreen openfullscreen"></button>
</main>
<footer class="footer">
<div class="footer-container">
<a class="github" href="#" target="_blank" rel="noopener noreferrer">github</a>
<a class="rss" href="https://rs.school/js/" target="_blank" rel="noopener noreferrer">
<span class="rss-year">'21</span>
</a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
I did it, here is the final code JS
const piano = document.querySelector(".piano");
const collectionPiano = document.querySelectorAll(".piano-key");
function playAudio (event) { //active status keys mouse event
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
const note = event.target.dataset.note;
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}
function removeActiveKey(event) { //remove active status keys mouse event
event.target.classList.remove("piano-key-active", "piano-key-active-pseudo");
}
function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio
if (event.target.classList.contains("piano-key")) {
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
}
collectionPiano.forEach((el) => {
el.addEventListener("mouseover", playAudio);
el.addEventListener("mouseout", removeActiveKey);
});
};
function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio
collectionPiano.forEach((el) => {
el.classList.remove("piano-key-active", "piano-key-active-pseudo");
el.removeEventListener("mouseover", playAudio);
el.removeEventListener("mouseout", removeActiveKey);
});
};
piano.addEventListener("mousedown", startKeyActive);
piano.addEventListener("mousedown", playAudio);
document.addEventListener("mouseup", stopKeyIActive);
window.addEventListener("keydown", (event) => { // Event keyboard - play audio
if (event.repeat) {
return;
}
const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`);
const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`);
audioKeys.currentTime = 0;
audioKeys.play();
pianoKey.classList.add('piano-key-active');
window.addEventListener("keyup", () => {
pianoKey.classList.remove('piano-key-active');
})
});

Autoplay and stop on opening and closing modal

I'm new to javascript and am facing issues with auto-playing video and stopping video upon opening and closing the modal.
Currently this script allows me to close the modal if I click outside of the video control and has to be fixed as well. It is intended to be able to play/pause the video on click of the video body, and modal to be closed when clicked out of the video.
At the same time, upon opening the modal, the video should be able to play automatically, likewise while closing the modal, video stop.
I am not familiar with the functions and if anyone could possibly suggest any improvement on the current script?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
.trailer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}
.trailer.active{
visibility: visible;
opacity: 1;
}
.trailer #mainvid{
position: relative;
max-width: 1200px;
outline: none;
}
.trailer-close{
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
}
#media (max-width: 991px) {
.trailer #mainvid{
max-width: 90%;
}
}
</style>
</head>
<body>
<div class="banner">
<div class="content">
<p>Testing Testing 1 2 3</p>
<a href="#" onclick="toggle();">
<button>Play Video</button>
</a>
</div>
</div>
<div class="trailer" id="main">
<video id="mainvid" src="/video/products/container accomodation/main/main video.mp4" controls="true"></video>
</div>
<script type="text/javascript">
function toggle(){
var trailer = document.querySelector(".trailer")
trailer.classList.toggle("active");
video.pause();
video.currentTime = 0;
}
window.addEventListener('mouseup',function(){
var traileractive = document.querySelector(".trailer.active")
traileractive.classList.toggle("active");
})
</script>
</body>
</html>
To handle states of the video player, we can simply use the play pause functions of HTMLMediaElement. Use this code, it handles all the desired functionalities.
var videoElem = document.querySelector(".trailer video");
var trailerElem = document.querySelector(".trailer")
function toggle() {
trailerElem.classList.add("active");
videoElem.play();
videoElem.currentTime = 0;
}
function handleTrailerClick(event) {
if (event && event.target && event.target.nodeName !== "VIDEO") {
videoElem.pause();
trailerElem.classList.remove('active');
}
}
function handleVideoClick(event) {
event.preventDefault();
videoElem.paused ? videoElem.play() : videoElem.pause();
}
document.querySelector("#playButton").addEventListener('click', toggle)
document.querySelector(".trailer").addEventListener('click', handleTrailerClick);
document.querySelector(".trailer video").addEventListener('click', handleVideoClick);
.trailer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
.trailer.active {
display: flex;
}
.trailer #mainvid {
position: relative;
max-width: 1200px;
outline: none;
}
.trailer-close {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
}
#media (max-width: 991px) {
.trailer #mainvid {
max-width: 90%;
}
}
<div class="banner">
<div class="content">
<p>Testing Testing 1 2 3</p>
<button id="playButton">Play Video</button>
</div>
</div>
<div class="trailer" id="main">
<video id="mainvid" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" controls="true"></video>
</div>

Play Html5 video on scroll

I am working on a Wordpress site and I have the code below which is working how I want it (only playing once, with the "replay" button appearing at the end)
I would like it to start playing when it is scrolled to ie. in the viewport.
I have seen a few different ways of making this happen on here, but I can't get them to play nice with my current code.
HTML
<div class="spacer">
</div>
<div class="video-wrapper">
<video id="bVideo" muted autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
<div class="replayButton" id="replayButton" onclick="playPause()">REPLAY ↻</div>
</div>
<script>
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
replay.className = "replayButton";
replay.style.visibility = "hidden";
}
else
{
bunnyVideo.pause();
el.className = "playButton";
replay.className = "";
}
}
function playPauseControls() {
if (!bunnyVideo.paused) {
el.className ="";
replay.className = "";
} else {
el.className = "playButton";
replay.className = "";
}
}
function videoEnd() {
replay.className = "replayButton";
replay.style.visibility = "visible";
el.className = "";
}
function showControls(){
bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
bunnyVideo.removeAttribute("controls","controls");
}
/*Google Analytics Tracker Function*/
/*Assuming you've already set up the Google Analytics script function on your webpage. This just activates a trigger event when the video plays.*/
/*function bunnyVideoView() {
ga('send', 'event', {
'eventCategory': 'Bunny Video',
'eventAction': 'play',
'eventLabel': 'Bunny Video View'
});
}*/
bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
/*Google Analytics Tracker*/
/*bunnyVideo.addEventListener("play", bunnyVideoView, false);*/
</script>
CSS
.spacer {
height: 400px;
}
.video-wrapper {
position: relative;
max-width: 680px;
}
.video-wrapper > video {
width: 100%;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
}
/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
.playButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 400ms;
}
.playButton:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.replayButton {
color: black;
position: relative;
text-align: center;
margin: auto;
margin-top: 0px;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 150ms;
}
.replayButton:hover, .replayButton:focus {
color: #ea7200;
}
.replayButton:before {
height: 45px;
width: 45px;
position: absolute;
top: 18px;
left: 18px;
content: '';
display: block;
border-color: transparent white white white;
border-radius: 50%;
border-style: solid;
border-width: 8px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.replayButton:after {
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 0 45px 22px 22px;
height: 0;
position: absolute;
top: 40px;
left: 15px;
bottom: 0;
right: 0;
width: 0;
content: "";
display: block;
margin: auto;
}
https://jsfiddle.net/ag3sowbg/
I had to solve a similar task some time ago.
First, you add an empty element absolutely positioned in the dead center of the video wrapper.
Next, you define the "belt" of your viewport as a tracking zone for the video trigger.
On window.scroll you simply detect if a collision trigger enters or leaves the trigger area and either play or pause the video.
I hope this helps: CodePen link
PS: I would probably be very careful with adding custom play/replay buttons as lots of media players in different browsers use their own (Safari, Firefox) and you'll most likely end up having two over each other (the browser default always wins, mind you). Been there :) Drop them if they aren't essential...

Categories

Resources