Develop Reference

pause the other playing video when play a new video jquery

I have many videos on one page.
I am using jquery to play and pause the videos
when I click on the play button it should play.
I did this using jquery. now I need to pause the other videos when I press play on the next or previous video. could you help me, please?
a screenshot is here
$('video').each(function(i, el) {
var p = $(el).parent();
$('.play-toggle', p).click(function(e) {
var button = $(this);
if (button.hasClass('playvideo')) {
button.removeClass('playvideo');
$('.play', button).hide();
$('.pause', button).show();
el.play();
} else {
button.addClass('playvideo');
$('.play', button).show();
$('.pause', button).hide();
el.pause();
}
});
});
$('video').each(function(i, el) {
var p = $(el).parent();
$('.sound-toggle', p).click(function(e) {
var button = $(this);
if (button.hasClass('playsound')) {
button.removeClass('playsound');
$('.play-sound', button).hide();
$('.pause-sound', button).show();
el.muted = true;
} else {
button.addClass('playsound');
$('.play-sound', button).show();
$('.pause-sound', button).hide();
el.muted = false;
}
});
});
<div class="video-player">
<video id="video1" width="420">
<source src="<?php echo base_url(); ?>assets/video/video.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
<div class="controls">
<button class="play-toggle playvideo">
<span class="play"><i class="fa-solid fa-play"></i></span>
<span class="pause" style="display: none;"><i class="fa-solid fa-pause"></i></span>
</button>
<button class="sound-toggle playsound">
<span class="play-sound"><i class="fa-solid fa-volume-high"></i></span>
<span class="pause-sound" style="display: none;"><i class="fa-solid fa-volume-xmark"></i></span>
</button>
</div>
</div>

To do what you require you can create a function which loops through all video elements and calls pause() on then. You can then call this function when a video is played.
In addition, note that instead of looping through the video elements on document.ready, you can instead attach event handlers to the media control buttons which use DOM traversal to find the related content when they are clicked. This has the benefit of simplfying the code, and maknig it easier to maintain. Try this:
let pauseAllVideos = excludeVideo => $('video').not(excludeVideo).each((i, v) => {
v.pause();
$(v).closest('.video-player').find('.play-toggle')
.removeClass('pause').addClass('play')
.find('i').removeClass('fa-pause').addClass('fa-play');
});
$('.play-toggle').on('click', e => {
let $button = $(e.currentTarget);
let video = $button.closest('.video-player').find('video')[0];
pauseAllVideos(video);
$button.toggleClass('play pause').find('i').toggleClass('fa-play fa-pause');
video[video.paused ? 'play' : 'pause']();
});
$('.sound-toggle').on('click', e => {
let $button = $(e.currentTarget);
let video = $button.closest('.video-player').find('video')[0];
$button.toggleClass('play-sound pause-sound').find('i').toggleClass('fa-volume-high fa-volume-xmark');
video.muted = !video.muted;
});
// This is just for this demo, so it doesn't deafen people :)
// it can be removed in your production version
$('video').each((i, v) => v.volume = 0.1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<p>Video #1:</p>
<div class="video-player">
<video id="video1" width="420">
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
<div class="controls">
<button class="play-toggle playvideo">
<span class="play"><i class="fa-solid fa-play"></i></span>
<span class="pause" style="display: none;"><i class="fa-solid fa-pause"></i></span>
</button>
<button class="sound-toggle playsound">
<span class="play-sound"><i class="fa-solid fa-volume-high"></i></span>
<span class="pause-sound" style="display: none;"><i class="fa-solid fa-volume-xmark"></i></span>
</button>
</div>
</div>
<p>Video #2:</p>
<div class="video-player">
<video id="video2" width="420">
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
<div class="controls">
<button class="play-toggle playvideo">
<span class="play"><i class="fa-solid fa-play"></i></span>
<span class="pause" style="display: none;"><i class="fa-solid fa-pause"></i></span>
</button>
<button class="sound-toggle playsound">
<span class="play-sound"><i class="fa-solid fa-volume-high"></i></span>
<span class="pause-sound" style="display: none;"><i class="fa-solid fa-volume-xmark"></i></span>
</button>
</div>
</div>

Playing a specific video file when there are multiple buttons, videos

Problem
I have four divs each with their own video file and button.
Right now, it is coded in a way that it only works with one file, but unfortunately not all of them.
I've tried using .each and using the index of the element, but I kept running into an issue where .pause() was not a function
Codepen
https://codepen.io/onlyandrewn/pen/NBvPjx
Objective
Clicking on a group's button should play that group's specific video file
scripts.js
$(function(){
function playVideo() {
var video = $(".video--inline")[0];
if (video.paused) {
video.play();
video.muted = false;
} else {
video.pause();
video.muted = true;
}
// Loads the clip again, so that it reverts back to the poster image
video.addEventListener("ended", function(){
video.load();
$("button").find("i").removeClass("fa-pause");
$("button").find("i").addClass("fa-play");
});
}
$("button").click(function(){
playVideo();
});
});
index.html
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-1.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-2.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>

Pass click event to your playVideo function then target video like this:
var video = $(e.target).closest('.group').find('video')[0];
$(function(){
function playVideo(e) {
var video = $(e.target).closest('.group').find('video')[0];
if (video.paused) {
video.play();
video.muted = false;
} else {
video.pause();
video.muted = true;
}
// Loads the clip again, so that it reverts back to the poster image
video.addEventListener("ended", function(){
video.load();
$("button").find("i").removeClass("fa-pause");
$("button").find("i").addClass("fa-play");
});
}
$("button").click(playVideo);
});
.group {display:inline-block; width:20vw}
video {width:20vw}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-1.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-2.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
<div class="group">
<video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm" class="video--inline"></video>
<div class="button__wrapper">
<button>Listen</button>
</div>
</div>
Update
We're passing a function name as a parameter to the click handler:
$("button").click(playVideo)
So playVideo will be called on click and the click Event object will be passed to playVideo as a parameter (we called it e): function playVideo(e).
e.target is the clicked element (button).
Then we're traversing from the button to the corresponding video.

make javascript keypress sounds exclusive to one another?

I have a simple site that triggers sounds on javascript keypress events. I need it to work so that when another sound is triggered the previous sound stops. For example when I press the next chord, the previous chord stops playing. I also need to create exclusivity groups, so that the next chord stops the previous chord, but doesn't stop the drums.
<div class="keys">
<div data-key="90" class="key">
<kbd>Z</kbd>
<span class="sound">Intro Drums</span>
</div>
<div data-key="88" class="key">
<kbd>X</kbd>
<span class="sound">Verse Drums</span>
</div>
<div data-key="67" class="key">
<kbd>C</kbd>
<span class="sound">Build Drums</span>
</div>
<div data-key="86" class="key">
<kbd>V</kbd>
<span class="sound">Drop Drums</span>
</div>
<div data-key="66" class="key">
<kbd>B</kbd>
<span class="sound">Bmajor(VI)</span>
</div>
<div data-key="78" class="key">
<kbd>N</kbd>
<span class="sound">C#major(VII)</span>
</div>
<div data-key="77" class="key">
<kbd>M</kbd>
<span class="sound">D#m(i)</span>
</div>
<div data-key="188" class="key">
<kbd><</kbd>
<span class="sound">Bbm(v)</span>
</div>
</div>
<audio data-key="90" src="sounds/drums/Drums1_Tambo.mp3"></audio>
<audio data-key="88" src="sounds/drums/Drums2_Verse.mp3"></audio>
<audio data-key="67" src="sounds/drums/Drums3_BuildUp.mp3"></audio>
<audio data-key="86" src="sounds/drums/Drums4_Drop.mp3"></audio>
<audio data-key="66" src="sounds/dropChords/ChordsBass1_Bmaj(VI).mp3"></audio>
<audio data-key="78" src="sounds/dropChords/ChordsBass2_CSharpmaj(VII).mp3"></audio>
<audio data-key="77" src="sounds/dropChords/ChordsBass3_DSharpm(i).mp3"></audio>
<audio data-key="188" src="sounds/dropChords/ChordsBass4_Bbm(iv).mp3"></audio>
<script>
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return; // stops the function from running
audio.currentTime = 0; //rewind to the start
audio.play();
key.classList.add('playing');
};
function removeTransition(e) {
if(e.propertyName !== 'transform') return;
this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
</script>
</body>
</html>

How to load html into hidden div?

I have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally
I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs
How can I have the contact link show the contact div and also load the external contact form into it?
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$(".contactmenu").click(function(){
$("#menu-contact").load("contactform.htm");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>

contactmenu class doesn't exist, try:
$("#contact-menu-item").click(function(){

How to remove zoom effect of tile(metro ui css) using javascript

I have created a tile(metro ui css) and the tile does following:
On click a video is played.
The slide right effect is not displayed(on click).
I cannot remove the zoom effect of the tile.I have tried removing tile class,but it is not working.Please help me to remove the zooming effect after the tile is clicked.Here is the code.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tile" id="vii">
<div class="tile-content slide-right" >
<div class="slide slide1">
<video id="myvideo" controls muted>
<source src="1.mp4" type="video/mp4" />
</video>
</div>
<div class="slide-over slide-over1" id="viii">
Attack by Smit
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
document.getElementById("vii").onclick=function(){
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}
Here is code snippet:
http://jsbin.com/tujakasuci/1/edit?html,output
Thank You!!

You should OnClick, remove slide-right Class. The zoom effect come from this class:
document.getElementById("vii").onclick=function(){
$('.tile-content').removeClass("slide-right");
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}