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)

Check if a HTML5 video is playing using jquery

I've written a small jquery code to override HTML 5 play function. However, I am not able to check if a video is playing or not.
Here is my jquery code
$("video").click(function() {
var video = $("#myvideo").get(0);
video.play();
$(".play").css("display", "none");
return false;
});
$("#myvideo").bind("pause ended", function() {
$(".play").css("display", "block");
});
Just give me simple tips to show a div with class="pause"(I have CSS for it) when the video is paused and pause the video as well.

You'd use the paused property to check if the video is paused.
If it's not paused, it's playing
$("video").click(function() {
var video = $("#myvideo").get(0);
if ( video.paused ) {
video.play();
$(".play").hide();
$(".pause").show();
} else {
video.pause();
$(".play").show();
$(".pause").hide();
}
return false;
});

As Jquery is the framework of Javascript
you can use the following code (involves Video JS Frame work):
var my_video_id = videojs('video_id');
if (my_video_id.player_.paused()) {
my_video_id.player_.play();
} else {
my_video_id.player_.pause();
}

show pause state when open a video in lightbox

I'm trying to make a function that when you click a play button, the video is showed center in page with lightbox effect. The problem is that i've set it to start playing, when you click the "open in lightbox play button" but the HTML5 video control show the play/pause button as "play" and not "pause". Is it possible to registrer if the video is playing it should add "pause" style from start etc.
link to live problem: http://instagib.dk/westring-kbh/
jsfiddle demo: http://jsfiddle.net/8rj09kL9/
I've tried something like this.
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function() {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function() {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// toggle play / pause
$('#play-pause').click(function() {
$('.toggle-play-pause').toggleClass('play','pause'); //Adds 'a', removes 'b' and vice versa
});
// video functionality
window.onload = function() {
// Video
var video = document.getElementById("showreel-video");
// Buttons
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
} else {
// Pause the video
video.pause();
}
});
}

I've changed something in your code, since you already use jquery, I converted it all to jquery.
$(document).ready(function () {
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function () {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function () {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// Event listener for the play/pause button
$("#play-pause").click(function () {
$('.toggle-play-pause').toggleClass('play', 'pause'); //Adds 'a', removes 'b' and vice versa
var video = $("#showreel-video")[0];
if (video.paused) {
video.play();
} else {
video.pause();
}
});
});
DEMO http://jsfiddle.net/8rj09kL9/4/
Seems to work somehow.

How to mute/unmute sound of an audio using javascript

I have created a fiddle of my function here( http://jsfiddle.net/rhy5K/10/ ) . Now i want to provide the Sound "Mute/unpute" option for users. Example if i click on "a link then sound playing like Get ready,5,4,3,2,1 should be mute and vice-versa.
I am thinking like to call a to toggle_sound function on click, but i am confuse like what should i write inside the function to mute the sound.
Please provide me a logic, or a solution for my problem.
Explanation using code example:
I want to MUTE/UnMUTE this below sound playing
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
Warning: This JS fiddle demo may play sound on load

Try
HTML5 Video_tag for display video with audio
or
this below example along with html5 with jquery
window.my_mute = false;
$('#my_mute_button').bind('click', function(){
$('audio,video').each(function(){
if (!my_mute ) {
if( !$(this).paused ) {
$(this).data('muted',true); //Store elements muted by the button.
$(this).pause(); // or .muted=true to keep playing muted
}
} else {
if( $(this).data('muted') ) {
$(this).data('muted',false);
$(this).play(); // or .muted=false
}
}
});
my_mute = !my_mute;
});

I think you can use:
document.getElementById(id).volume = 1;
or
document.getElementById(id).volume = 0;

How can i dynamically load/play/pause multiple-source HTML5 audio on click?

I have a content slider, set to play / stop on each click.
The problem: I want it to pause on second click. Right now it won't pause. Any ideas?
See site here: http://dev.alsoknownas.ca/music/ (audio branding section on homepage).
Here's the code:
**Edited to reflect the code suggested by Lloyd below:
<audio id="player"></audio>
Here's the script:
$(document).ready(function(){
$("span.1").attr("data-src","song.mp3");
$("span.2").attr("data-src","song2.mp3");
$("span.3").attr("data-src","song3.mp3");
$("span.4").attr("data-src","song4.mp3");
$("span.5").attr("data-src","song5.mp3");
});
$("span.1,span.2,span.3,span.4,span.5").click(function () {
var player = document.getElementById("player");
player.src = this.getAttribute("data-src");
player.play();
});

for this markup:
<audio id="player"></audio>
<span class="1">one</span>
<span class="2">two</span>
use this script:
$("span.1")
.attr("data-src-mp3","song1.mp3")
.attr("data-src-ogg","song1.ogg");
$("span.2")
.attr("data-src-mp3","song2.mp3")
.attr("data-src-ogg","song2.ogg");
$("span[data-src-mp3]").click(function () {
var player = document.getElementById("player"),
$this = $(this);
if ($this.hasClass("selected")) {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
else {
$("span[data-src-mp3].selected").removeClass("selected");
$this.addClass("selected");
$(player)
.empty()
.append($("<source>").attr("src", $this.attr("data-src-mp3")))
.append($("<source>").attr("src", $this.attr("data-src-ogg")))
player.play();
}
});
Live Demo: http://jsfiddle.net/75lb/8cGBx/

Try this,
Instead of doing
$('audio').bind('play','pause', function() {
Do
$('audio').bind('play pause', function(event) {
According to your code, by default audio is paused, when user clicks, it starts playing, and on next click it pauses.
Hope this works for you.