Develop Reference

Hide button on videojs play()?

I have a play button inside of a video js video / container and I would like the button to hide(), when the video plays. It works if I just use $('.video-play-btn).hide() on the play function but the problem is I have numerous videos on the page so it is hiding them all, I only want the video that is being played for the button to hide.
html:
<div class="col-lg-6">
<video-js data-video-id="6563228568228"
data-embed="default"
data-application-id=""
class="video-js video-container--outer full-width"
controls
id=""
webkit-playsinline="true" playsinline="true"></video-js>
<!-- play button -->
<button class="video-play-btn btn"><i class="fa fa-play fa-play-video-inline"></i></button>
</div>
jquery:
var videoPlayer = videojs('video-one');
videoPlayer.on('play', function () {
$(this).parent().find('.video-play-btn').hide();
});

What you can do give the button id which is the video id with some prefix or suffix,on play function get the ID of video and embed suffix or prefix and hide that button.
In the below example v_6563228568228 is video id and btn_v_6563228568228 is the button id that is same as video id with prefix of btn_.This way you can provide unique id to your button.
Example.
<div class="col-lg-6">
<video
id="v_6563228568228"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="https://mobamotion.mobatek.net/samples/sample-mp4-video.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<button class="video-play-btn btn" id="btn_v_6563228568228"><i class="fa fa-play fa-play-video-inline"></button>
</div>
<script>
var videoPlayer = videojs('v_6563228568228');
videoPlayer.on('play', function () {
vid_id = $(this).attr('id');
$("#btn_"+vid_id).hide();
});
</script>

How to display elements after button has been clicked?

I am creating a timer app, and when I click the start button I have the timer starting, but I want it to display the pause and play buttons. Pretty much I'm trying to do the reverse of what I did with the start button.
I have already tried setting it to
middlebuttons.style.display= "block"
but that doesn't work.
Javascript
var startButton = document.getElementById("start");
var startSound = document.getElementById("audio");
var timerSound = document.getElementById("timer");
var counter = document.getElementById("counter");
var middlebuttons = document.getElementsByClassName("middlebuttons");
function playAudio(){
startSound.play();
}
// Start button will disappear after click and countDown method will begin
function startTimer(){
startButton.style.display="none";
middlebuttons.style.display = "block";
countDown(1);
}
startButton.addEventListener('click', startTimer, playAudio);
HTML
<div class="container">
<div class="buttons">
<button id ="start" type="button" onclick="playAudio()">Start</button>
<audio id="audio">
<source src="clicksound.wav" type="audio/ogg ">
</audio>
<audio id="timer">
<source src="gong.mp3" type="audio/ogg ">
</audio>
</div>
<div id="counter">
</div>
<div class="middlebuttons" style="display: none">
<div class="row mr-3">
<button id="pause" >
<i class="fas fa-pause" style="font-size: 40px"></i>
</button>
<button id="play">
<i class="fas fa-play" style="font-size: 40px"></i>
</button>
</div>
</div>
</div>

You should iterate over the buttons and update the display property for each button :
for (var i = 0; i < middlebuttons.length; i++) {
middlebuttons[i].style.display = "block";
}
// or
middlebuttons.forEach(function(btn) {
btn.style.display = "block";
});

middlebuttons is a HTMLCollection (like an array) so you need to loop through it and apply the styles to each element:
[...middlebuttons].forEach(button => button.style.display = "block");
Older browsers:
Array.prototype.slice.call(middlebuttons).forEach(function(button) {
button.style.display = "block";
});
Also on older browsers (thanks connexo):
Array.prototype.forEach.call(middlebuttons, function(button) {
button.style.display = "block";
});

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>

Why won't my button play my sound and go to the link?

This looks like a basic problem but failed to find the answer.. Is there anything I need to add for the button to bring a user to the home page and play the sound? At the moment it only plays the sound. I want it to play the sound immediately then go to the homepage.
function playBeep() {
var sound = document.getElementById("Sound")
sound.play()
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

You should wait until the <audio> element is done playing, then tell the browser to navigate to a new page:
function playBeep() {
var sound = document.getElementById("Sound");
sound.play();
sound.addEventListener('ended', function () {
location.href = 'Home.html';
});
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

just need to add your link window.location = "http://stackoverflow.com";
function playBeep() {
var sound = document.getElementById("Sound")
sound.play();
window.location = "http://stackoverflow.com";
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

function playBeep() {
var sound = document.getElementById("Sound")
sound.play();
window.location.href = '/'; //Go to HomePage
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

Your button is not in the <a>tag
Maybe this will work :
<a href="Home.html">
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</a>

Your problem is the closing tag of a.
the tag "a" has to wrap the whole button.
<a href="Home.html">
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</a>

You could always use jQuery to listen for the sound to end and redirect the user.
/* Bind Ended Event to Sound */
$('#Sound').on('ended', function(){
console.log('User Redirected');
});
/* Bind Click Event to Button */
$('#aButton').on('click', function() {
$('#Sound')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton">
<img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png">
</button>
</div>
Or you could use just JavaScript to listen for the sound to end and redirect the user.
/* Variable Defaults */
var sound = document.getElementById('Sound');
var button = document.getElementById('aButton');
/* Bind Ended Event to Sound */
sound.addEventListener('ended', function(){
console.log('User Redirected');
});
/* Bind Click Event to Button */
button.addEventListener('click', function() {
sound.play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton">
<img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png">
</button>
</div>

How to add video to playlist by clicking on button with source

I have a problem, I want to add a video by button with source onto playlist. Something like... During the first video plays, there are 3 buttons with mp4 sources. When I click on that buttons, they start playing. Everything works, but I don´t want that thing. I want to make a function when I onclick on a button, video starts playing after the first video. Something like flowplayer - http://flash.flowplayer.org/demos/plugins/javascript/playlist/dynamic.html
function add to position 2.
<body>
<div style="overflow: hidden;">
<video id="video" width="80%" autoplay controls >
<source id="videoSource" src="video/0.mp4" type="video/mp4">
</video>
<a class="btn blue" onclick="changevideo0()">0</a>
<a class="btn blue" onclick="changevideo1()">1</a>
<a class="btn blue" onclick="changevideo2()">2</a>
</div>
<script>
function changevideo0() {
document.getElementById('video').src = "video/0.mp4";}
function changevideo1() {
document.getElementById('video').src = "video/1.mp4";}
function changevideo2() {
document.getElementById('video').src = "video/2.mp4";}
</script>
</body>

I changed your function slightly because it is not efficient to add that many functions just to change one part of it.
Your code was pretty good, just pointing to the wrong element.
function changevideo(source) {
document.getElementById('videoSource').src = source;
}
<body>
<div style="overflow: hidden;">
<video id="video" width="80%" autoplay controls >
<source id="videoSource" src="video/0.mp4" type="video/mp4">
</video>
<a class="btn blue" onclick="changevideo('video/0.mp4')">0</a>
<a class="btn blue" onclick="changevideo('video/1.mp4')">1</a>
<a class="btn blue" onclick="changevideo('video/2.mp4')">2</a>
</div>
</body>

You should consider the following example as logic code, as I have not tested, checked for syntax errors and noor do I know from the top of my head if I should get the length of the video from the source or player element in HTML.
<body>
<script>
var player = document.getElementById("video");
var videolist = {
'video/0.mp4',
'video/1.mp4',
'video/2.mp4'
};
var queuelist = {};
function changevideo() {
if(!queuelist.length == 0){
document.getElementById('videoSource').src = queuelist.shift();
setTimeout(changevideo, player.length * 1000);
} else {
alert("no more video's in queue");
}
}
player.play();
setTimeout('changevideo', player.length * 1000);
</script>
<div style="overflow: hidden;">
<video id="video" width="80%" autoplay controls >
<source id="videoSource" src="video/0.mp4" type="video/mp4">
</video>
<a class="btn blue" onclick="queuelist.append(0)">0</a>
<a class="btn blue" onclick="queuelist.append(1)">1</a>
<a class="btn blue" onclick="queuelist.append(2)">2</a>
</div>
</body>