Develop Reference

I want to make all videos can play/pause JS

I have a page with some videos. I want to implement the ability to click on a button to make a video play and if I click another button the current video will stop and the next video will start playing.
How can something like this be achieved?
My project is similar to Netflix's main page.
My Website:
https://capcom2store.com/mov4k.php
This is my JS:
<script>
var videoElement = document.getElementById("myVideo");
function playPause() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
};
</script>

One of the things you can do is to do something similar to the following:
// Get all video elements on the current page
const videoElements = document.querySelectorAll("video");
for (const videoEl of videoElements) {
// Listen to clicks on every one of the videos
videoEl.onclick = () => {
if (videoEl.paused) {
for (const video of videoElements) {
// When starting to play one video, pause all others
video.pause();
}
videoEl.play();
} else {
videoEl.pause()
}
}
}
<video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
Although this is a very simple example, because it takes over all of the click events of the video elements. It would be better to detect clicks another way (like having an overlay element or a button)

How to close popup when youtube video is playing on esc button button?

Click me to see the demo
When video is not playing then Esc button pressed the popup closes but it does not work when video is playing.

In your demo, ensure the iframe containing the video is cleared when the layer is hidden. Change your hide function to this:
function popup(){
var img = document.getElementsByClassName('image-bann')[0];
img.querySelector('iframe').src = "https://www.youtube.com/embed/0mQLTWvXbXM";
document.getElementsByClassName('pop')[0].style.display="block";
}
function hide(e) {
var img = document.getElementsByClassName('image-bann')[0];
if (img.contains(e.target)) {
e.preventDefault();
return false;
}
img.querySelector('iframe').src = "about:blank";
document.getElementsByClassName('pop')[0].style.display="none";
}

Stopping a scrollhandler from running after someone clicks an element

Ok so when someone scrolls to the video it starts and when someone scrolls away from the video it stops using load restarting the video and showing the poster.
The problem I have is that I don't want this function to run when someone clicks to pause the video. It would be pretty annoying for the scroll handler to take control.
jQuery(window).load(function(){
jQuery(window).scroll(function(){
playvideo();
});
});
var playvideo = function(){
var scrollTop = jQuery(window).scrollTop()+jQuery(window).height();
var elem='.video';
var video = document.getElementById('video-background');
var elheight = jQuery(elem).height();
if(scrollTop >= jQuery(elem).offset().top+elheight){
//fade out the video play button and start the video
$j('.video-caption-wrapper').fadeOut("Fast",function() {video.play();});
}else{
// fade in the play button and reload the video
$j('.video-caption-wrapper').fadeIn("Fast",function() {video.load()});
}
}
$j('#video-background').click(function(event) {
//when the video is clicked pause it and unbind scrolling
if (this.paused == false) {
this.pause();
$j(window).off("scroll",playvideo);
} else {
this.play();
}
});

This:
jQuery(window).load(function(){
jQuery(window).scroll(function(){
playvideo();
});
});
Should be:
jQuery(window).load(function(){
jQuery(window).scroll(playvideo);
});
That will allow you to refer to the playvideo function when removing the scroll listener. Right now you try to remove playvideo as a listener when you have never added it. You added an anonymous function which calls playvideo.

How do you pause between 2 functions?

A previous question I asked has got me half way to where I need to be, I now have 1 function that fires off 2 functions. A 'loader' function (a spinner graphic) and playAudio which play a file.
function loadPlay(src, trackName) {
loader();
playAudio(src, trackName);
}
When a play button is clicked the load spinner is supposed to appear and when the audio plays the spinner should go away.
Play button:
<span class="play" onclick="loadPlay('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')" id="t3">
But what is happening is after the play button is clicked there is a slight pause (as audio loads) and the audio and spinner appear at the same time? The loader should appear as the track loads and then go away when the audio plays?
How do I add a pause to make sure the loader appears BEFORE the audio plays?
Both Functions:
function loader() {
// make a loader spinner appear as track loads
$(".loading").addClass("loadingnow");
}
function playAudio(src,trackname) {
// for Android
if (audioPlaying === false) {
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
media = new Media(src, success, error_error);
media.play();
//add playing class so play button is replaced with stop button
document.getElementById(trackname).parentNode.className="playing";
// now track is playing remove the loader spinner
$(".loading").removeClass("loadingnow");
audioPlaying = true;
} else {
//audio is already playing
}
}
function success() {
// track has finished playing so remove the stop button put play button back
$(".playing").removeClass("playing");
audioPlaying = false;
}
function error_error(e) {
//alert('great error');
//alert(e.message);
}
function stopAudio() {
// stop playing track
if (media) {
media.stop();
audioPlaying = false;
}
}

You can use setTimeout to force jQuery to wait a amount of milliseconds
function loadPlay(src, trackName) {
loader();
setTimeout(function(){
playAudio(src, trackName);
}, 1000);
}
This will force the playAudio to wait for 1 second. Your loader will pop up, but your user will have to wait for an additional second because of this.

Javascript Loop and Button

Hello wonderful web programmers. I need some help, and I believe there must be a simple answer.
The Goal
I need to be able to pause all Vimeo Videos on a WordPress webpage. I would really like it if I could just add a class "pause" to any tag (so I could use a div or anchor rather than just a button) and have that pause all playing videos.
The following code works if I have buttons, but it only works on the first video. Apparently I need to make a loop of some sort to have it work on all of the videos on a page:
The Code
<button class="simple">play</button> <button class="simple">pause</button>
<script>
//HERE IS THE SIMPLE CODE THAT WORKS
var f = $('iframe'),
url = f.attr('src').split('?')[0];
// postMessage
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f[0].contentWindow.postMessage(JSON.stringify(data), url);
}
// Play & Pause
$('button').click(function() {
post($(this).text());
});
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
} else { // IE
window.attachEvent('onmessage', onMessageReceived, false);
}
</script>
The Question
Where would the loop go? Also, what should I change so that another element can pause? Here is some other code where a class is used:
/**
* Sets up the actions for the buttons that will perform simple
* api calls to Froogaloop (play, pause, etc.). These api methods
* are actions performed on the player that take no parameters and
* return no values.
*/
function setupSimpleButtons() {
var buttons = container.querySelector('div .simple'),
playBtn = buttons.querySelector('.play'),
pauseBtn = buttons.querySelector('.pause'),
unloadBtn = buttons.querySelector('.unload');
// Call play when play button clicked
addEvent(playBtn, 'click', function() {
froogaloop.api('play');
}, false);
// Call pause when pause button clicked
addEvent(pauseBtn, 'click', function() {
froogaloop.api('pause');
}, false);
// Call unload when unload button clicked
addEvent(unloadBtn, 'click', function() {
froogaloop.api('unload');
}, false);
}
setupSimpleButtons();
setupEventListeners();