Develop Reference

Video is playing in chrome,but it is not playing in safari browser

I have 2 videos as a background / z-index = 1.
2 columns divided the screen in 50/50 ratio z-index = 3. if mouse is hovering over first column, then first video is playing in background, when mouse is hovering in second column, first video is hidden and second video is playing in background.
It is working in CHROME browser, but it is not working in safari-doesnt play video nor sound.
Can you show me how to fix it please?
const boxes = document.querySelectorAll('.boxes')
const video1 = document.querySelector('.video1')
const video2 = document.querySelector('.video2')
boxes.forEach(box => {
box.addEventListener('mouseover', (e) => {
e.preventDefault()
const a = e.currentTarget.dataset.set
console.log(a)
if (a === '1') {
var promise1 = video1.play();
if (promise1 !== undefined) {
promise1.catch(error => {
console.log(error);
}).then(() => {
video1.classList.remove('hiddn')
video2.classList.add('hiddn')
video2.pause()
})
}
} else if (a === '2') {
var promise2 = video2.play();
if (promise2 !== undefined) {
promise2.catch(error => {
console.log(error);
}).then(() => {
video1.classList.add('hiddn')
video1.pause()
video2.classList.remove('hiddn')
})
}
}
})
})
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true"></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true"></video>

It only works when including playsinline.
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true" loop muted playsinline ></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true" loop muted playsinline></video>
Second solution :
if the first solution doesn't work, you may need to set the controls="true" flag.
<video loop autoplay controls="true" src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>
FYI: if you run it on apple device e.g. Ipad/Iphone and then turn off the low power mode it may works.

How to toggle multiple play/pause buttons with different srcs

I'm facing some issues with my play/pause buttons. In ym HTMl I have multiple buttons with different sources:
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
This is my Javascript:
var buttons = document.getElementById("button");
var music = document.getElementById("player");
for (const buttons of button) {
buttons.addEventListener("click", function(){
if(music.paused){
music.play();
buttons.innerHTML = "Pause";
} else {
music.pause();
buttons.innerHTML = "Play";
}
});
}
But when I play music from the first button and then pause it, go over to the next button and toggle the button, the sound keeps playing from that point where I stopped it instead of playing the sound from the written source.
Anyone here that could help me?

Id attributes in HTML should be unique. The document.getElementById returns a single element (if found).
One solution to fixing your problem is to give each pair of button/audio elements different ids, for example:
<div>
<button class="button-53" id="button1">Play</button>
</div>
<audio id="player1">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button2">Play</button>
</div>
<audio id="player2">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
and then add event listeners for each pair:
function addListeners(buttonElement, audioElement) {
// ...add implementation
}
addListeners(
document.getElementById("button1"),
document.getElementById("player1")
);
addListeners(
document.getElementById("button2"),
document.getElementById("player2")
);

How to create a page with 4 buttons that play audio from gdrive?

I'm trying to create a simple html page with 4 button that plays audio from my gdrive.
How can I add three additional audios each to a different button and allowing only one to be played at a time while pausing the others?
This is the code with the first working button. Thank you in advance for your help.
<div class="test">
<ul>
<li>
<p>Click here</p>
<img src="media/play.png" id="icon"></li>
<li>
<p>Click here</p>
<img src="media/play.png" id="icon2"></li>
<li>
<p>Click here</p>
<img src="media/play.png" id="icon3"></li>
<li>
<p>Click here</p>
<img src="media/play.png" id="icon4"></li>
</ul>
</div>
<audio id="mySong">
<source src="https://drive.google.com/u/0/uc?id=1HqQ6zRurKoFRHBak1gmwsPG9Z6P8qF2G&export=download" type="audio/mp3"> </audio>
<script>
var mySong = document.getElementById("mySong");
var icon = document.getElementById("icon");
icon.onclick = function() {
if (mySong.paused) {
mySong.play();
icon.src = "media/pause.png";
} else {
mySong.pause();
icon.src = "media/play.png";
}
}
</script>

You can make a list of all the icons and songs.
When you play one song, all of the others get paused.
In this example, all the tunes are the same.
Change the audio links if you want them to be different.
<ul>
<li><p>Click here</p><img src = media/play.png id = icon1></li>
<li><p>Click here</p><img src = media/play.png id = icon2></li>
<li><p>Click here</p><img src = media/play.png id = icon3></li>
<li><p>Click here</p><img src = media/play.png id = icon4></li>
</ul>
<audio id = song1>
<source src = "https://drive.google.com/u/0/uc?id=1HqQ6zRurKoFRHBak1gmwsPG9Z6P8qF2G&export=download" type = audio/mp3>
</audio>
<audio id = song2>
<source src = "https://drive.google.com/u/0/uc?id=1HqQ6zRurKoFRHBak1gmwsPG9Z6P8qF2G&export=download" type = audio/mp3>
</audio>
<audio id = song3>
<source src = "https://drive.google.com/u/0/uc?id=1HqQ6zRurKoFRHBak1gmwsPG9Z6P8qF2G&export=download" type = audio/mp3>
</audio>
<audio id = song4>
<source src = "https://drive.google.com/u/0/uc?id=1HqQ6zRurKoFRHBak1gmwsPG9Z6P8qF2G&export=download" type = audio/mp3>
</audio>
<script>
let songs = [song1, song2, song3, song4]
let icons = [icon1, icon2, icon3, icon4]
icons.forEach((icon, index) => {
icon.onclick = function() {
if (songs[index].paused) {
songs.forEach(song => song.pause())
icons.forEach(icon => icon.src = "media/play.png")
songs[index].play()
icon.src = "media/pause.png"
}
else {
songs[index].pause()
icon.src = "media/play.png"
}
}
})
</script>

Two click differnets (Text and Image) and play audio

I have a text and a image that I add an attribute to each onclick="playAudio()".
<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test">
I want to do the following. If I click text playing audio, else if I click image stop playing audio at text and playing audio at image.
How to make that?
HTML audio.
<audio id="myAudio">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
And JS.
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}

Here's an overly simplistic code for that:
var audio1 = document.getElementById("audio1"),
audio2 = document.getElementById("audio2"),
whoIsPlaying = null;
function clickOnH1() {
if (whoIsPlaying != 'H1') {
audio2.pause();
audio1.play();
whoIsPlaying = 'H1';
}
}
function clickOnIMG() {
if (whoIsPlaying != 'IMG') {
audio1.pause();
audio2.play();
whoIsPlaying = 'IMG';
}
}
clickOnH1 function should go into onclick attribute of H1 tag, and clickOnIMG function should go into onclick attribute of IMG tag.

Please find below snippet pass this as an argument so we can get tagName of clicked element and than put conditions accordingly..
var x = document.getElementById("myAudio");
function playAudio(e) {
if(e.tagName == "IMG")
{
alert('Stop') ;
}
if(e.tagName == "H1")
{
alert('Play') ;
}
}
<h1 class="underline-on-hover" onclick="playAudio(this)" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio(this)" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test" />

Multiple audio sources to tag doesn't work this way.
Something like this should work, if you only need to handle the image click right after text click.
var img = document.getElementById("img");
function playAudio() {
x = new Audio("sound.mp3");
x.play();
img.addEventListener('click',changeAudio(x));
}
function changeAudio(x){
return function(){
x.pause();
x.src = "sound2.mp3";
x.play();
}
}
<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onmouseover="" style="cursor: pointer;" id="img"
class="img-responsive" src="imagetest.png" alt="Image Test">

Play and pause one HTML5 audio element at a time via jQuery

I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.
How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.
Thank you!
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript: (that works, but plays/pauses individually)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
JavaScript: (ugly concept of mine)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
song.not($(this).pause();
else
song.pause();
});
});

var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); }
if(song.paused) { song.play(); } else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
That should work.
EDIT:
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});

This little function works for me. It stops all other audio elements playing on the page and lets the one that has been started keep playing. Here is a fiddle.
$("audio").on("play", function (me) {
jQuery('audio').each(function (i,e) {
if (e != me.currentTarget)
{
this.pause();
}
});
});