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>

Looping JavaScript

I have been searching Stackoverflow and Google, and tried everything I clould think of to figure out how to loop through an html file with javascript and find all of the video files, and their unique ID, but I cant seem to get it right. I have not been coding in several years, so I am very rusty and most of my experience is with back end code. I have very little experience with DOM and Javascipt, I am sure what ever I have tried, I have probably screwed up the syntax/semantics.
What the code does:
The Javascript makes videos pop up and play in a modal window, however since it is hard coded, I can only input one unique ID, and when you click on each of the videos on the web page, of course, they play the same video.
Hope someone can help, this is a personal project for my game collection and the only thing I have left to complete is this last piece of code. Thanks in advance for any assistance.
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
function lightbox_open() {
var lightBoxVideo = document.getElementById("Some-ID-Variable");
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function lightbox_close() {
var lightBoxVideo = document.getElementById("Some-ID-Variable");
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
<!--Here is the HTML I have, I am only showing 2 game titles in the example, but this code repeats for every game in my collection:-->
<div class="containers">
<!--Begin .container-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="MyVideo" width="600" controls>
<source src="videos/game-title-1-trailer.mp4" type="video/mp4">
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<img class="title-image" src="images/placeholder.jpg" alt="Some Title">
<br>
<span class="title-text">Game Title 1</span>
<br>
<ul>
<li>Comfort: Intense</li>
<li>Learning Curve: Intermediate</li>
</ul>
<br>
<p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
<br>
</div>
</div>
<!--End .container-->
<div class="containers">
<!--Begin .container-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="MyVideo" width="600" controls>
<source src="videos/game-title-trailer-2.mp4" type="video/mp4">
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<img class="title-image" src="images/placeholder.jpg" alt="Some Title">
<br>
<span class="title-text">Game Title 2</span>
<br>
<ul>
<li>Comfort: Intense</li>
<li>Learning Curve: Intermediate</li>
</ul>
<br>
<p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
<br>
</div>
</div>

Like James said, document.querySelectorAll('video') will get every video tag on the page, but if I understand your question correctly, you want to find a specific ID and play it when it's chosen. Looping is probably an inefficient way to do that, especially if you have many videos.
Perhaps you can try putting a variable in your onclick, like onclick="lightbox_open('1')", then in that function you can do:
function lightbox_open(idNum) {
var lightBoxVideo = document.getElementById("Some-ID-Variable" + idNum);
//...
}
Then if you're building more possible videos from the backend, you can just increment that variable when you set each element's onclick attribute.

Add sound through onclick-event button

Trying to add sound to these buttons
<audio id="sound1" src="Button_Push.mp3" preload="auto"></audio><button onClick="document.getElementId('sound1').play();" target="_top">Stouts</button>
<button target="_top">Sours</button>
<button target="_top">India Pale Ales</button>.
<button target="_top">Brett and more</button>
<button target="_top">test</button>

you can add sounds to button but it will refresh page as you are using href on click of a tag. inside that button click will call play function to play the sound.
<script>
function play(src) {
var player = document.getElementById('audio');
player.pause();
player.currentTime = 0;
player.src = src;
player.play();
}
</script>
<input type="button" value="PLAY" onclick="play('http://dev.interactive-creation-works.net/1/1.ogg')">
<audio id="audio" src="http://dev.interactive-creation-works.net/1/1.ogg" autostart="false"></audio>
<a href="stout_page.html"><audio id="sound1" src="Button_Push.mp3" preload="auto"></audio>
<button onClick="play('Button_Push.mp3');" target="_top">Stouts</button></a>
<button target="_top" onClick="play('Button_Push-1.mp3');" >Sours</button>
<button target="_top" onClick="play('Button_Push-2.mp3');">India Pale Ales</button>
<button target="_top" onClick="play('Button_Push-3.mp3');">Brett and more</button>
<button target="_top" onClick="play('Button_Push-4.mp3');">test</button>

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>