Can't toggle mute/sound

[fregante]

Can't toggle mute/sound

[GordanRatkovic]

Any progress on this? I noticed you have an active branch for the mute-toggle feature.

[fregante]

Last week I started some work to do exactly that, but it's not finished yet and I don't remember how well it worked: https://github.com/bfred-it/iphone-inline-video/tree/mute-toggle-test

For now you'll just have to have to separate <video> elements, one muted and the other one to replace it with

[giannoudak]

At first thanks for your immediate reply! this was really helpfull!

For your workaround you mention with two <video> elements, how they can be synchronized? As far i understand, say that we autoplay muted the one video, and with click on a sound button we trigger play for the other video on the first's currentTime. I'm on the right direction?

Also, actually do you have an estimation on that branch completion?

[fregante]

Something like this:

    //audioVideo.load() // not necessary, but may make the jump faster
    mutedVideo.onclick = function () {
        audioVideo.currentTime = mutedVideo.currentTime;
        mutedVideo.pause();
        audioVideo.play();
    }

This is probably going to take a bit to actually start playing, but maybe you can jumpstart that with the first line.

Not sure about when I can look into that, it's unlikely to be done before the end of next week.

[reidblomquist]

+1 would love to see this feature added

[windchime18]

i think playing two videos simultaneously is not possible depending on the iOS version. I have also tried it and it worked on iOS9 but not on iOS10 Playing multiple videos side by side iOS #92

[windchime18]

I think i have found a possible work around on this problem. you can use this code
you should have a two videos. then a button to activate the function enable the 2nd video with sounds.

var video = document.getElementById("video_without_audio"); 
var myVideo = document.getElementById("video_with_audio");

function enableSound() {
    myVideo.load();
    myVideo.play();
    myVideo.pause();
    video.pause();
    $("#video_without_audio").css("display", "none");
    $("#video_with_audio").css("display", "block");
}

myVideo.addEventListener("canplay", function() {
// console.log(" canplay: before = " + myVideo.currentTime);
myVideo.currentTime = video.currentTime;
// console.log(" canplay: after = " + myVideo.currentTime);

if( myVideo.currentTime < 1 ) {
	myVideo.play();
}
else {
	setTimeout(checkStarted, 500);
}
    
}, false);

function checkStarted()
{ 
console.log("check started");
   myVideo.play();
}