Develop Reference

How can I ensure that 2 <video>s are played at the exact same time (with no lag)?

Here is my current code: https://jsfiddle.net/n7u4twb1/10/
Current js code:
Data={
num_files:2
}
Video = {
preview: {
play_all: function(){
for(i=0;i<Data.num_files;i++){
$('#video'+i).get(0).play();
}
}
}
}
With the "Play All" button I encounter lag more than half the time. How can I ensure that the videos are played at the same time with no lag? It is to preview video collages (multiple videos) before they are processed and turned into one video -- I want users to be able to edit the timing at which each video starts but they need a way to preview the collage before the processing starts! Thanks in advance

If you have a button for each video, add an extra button that uses the .click() method. The .click() method is like jQuery .trigger() method which when invoked will auto click whatever it's bound to.
Demo
var ui = document.forms.ui;
var btns = ui.elements;
btns[0].onclick = function(e) {
play(0);
}
btns[1].onclick = function(e) {
play(1);
}
btns.vSync.onclick = function(e) {
btns[0].click();
btns[1].click();
}
function play(idx) {
var vids = Array.from(document.querySelectorAll('video'));
var vid = vids[idx];
if (vid.paused || vid.ended) {
vid.play();
} else {
vid.pause();
}
}
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' width='240'></video>
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' width='240'></video>
<form id='ui'>
<button data-id='0' type='button'>VIDEO A</button>
<button data-id='1' type='button'>VIDEO B</button>
<button id='vSync' type='button'>SYNC</button>
</form>

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.

changing image in start and pause player javascript

I have a code that works great for starting and pausing audio html5 player and it looks like this
i want to insert that the img of the player will too change on every click and what i wrote is this
<script>
function aud_play_pause4() {
var myAudio = document.getElementById("myAudio4");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
<script>
function aud_play_pause5() {
var myAudio = document.getElementById("myAudio5");
if (myAudio.paused && document.getElementById("btn").src == "btnpause.png") {
myAudio.play();
document.getElementById("btn").src = "btn.png";
} else {
myAudio.pause();
document.getElementById("btn").src = "btnpause.png";
}
}
</script>
this is the fifth track ID
im checking the log but their is nothing wrong with the code
but what I saw that it changes the first track id and not the fifth
192.185.121.126/~vagabond/coral/ this is the link

Your IDs must be specific for each button (img)... you have "btn" as the ID for all your buttons (img).
So, when you call document.getElementById("btn") it is getting the first img (button).

Toggling on the first click

I've tried two different methods of toggling the play/pause button on my player, neither of which work on the first click, for some reason.
This one, supposedly checks the status of the audio to see if it's paused or ended:
function togglePlayPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
var playpause = document.getElementById("playpause");
if (audioPlayer.paused || audioPlayer.ended) {
playpause.title = "pause";
playpause.innerHTML = "pause";
}
else {
playpause.title = "play";
playpause.innerHTML = "play";
}
}
Or I've tried this one, which just toggles via the onClick toggle(this):
function toggle(obj) {
if (obj.className== 'playButton') {
obj.className = 'pauseButton';
obj.title = "PAUSE";
obj.innerHTML = "PAUSE";
} else {
obj.className = 'playButton';
obj.title = "PLAY";
obj.innerHTML = "PLAY";
}
}
Neither toggle the first time the button is clicked, although the first method does change from the default inner "PLAY" to "play", so I guess that's something:
<div title="play" class="playButton" id="playpause">PLAY</div>
In both methods, subsequent clicks work fine. Any idea why this is happening? Could it have something to do with the way the audioPlayer variable is called? The array starts from 0. (I'm clutching at straws.)
Many thanks as usual!

I would go without creating functions, I would check if the link is clicked then proceed to the events that would be fired.
so something like $("#start").click(function(){}); in can be tried.
First, have the jQuery library included in your HTML header.
Then create a new javascript file, included it as well (usually this is put after the jQuery included)
In your new javascript file write the following
$(document).ready(function() {
$("#start, #stop, #play, #pause").click(function() { //you can have more or less selectors (selectors are the ones with #)
//Your code goes here
});
});
Here is a fiddle for that solution. http://jsfiddle.net/JRRm2/1/ (tidier text: http://jsfiddle.net/JRRm2/2/)

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.