2 years ago
#71247
lucasmang
Audio for background video desynced when unmuting from custom button with jquery
Hey all thanks in advance for any help I may receive!
I am using the DIVI theme in WordPress. I have a background video that autoplays and a custom mute/unmute button that I am using jQuery to toggle. My code seems to be the same as other questions on here and is muting / unmuting fine but the audio seems to be out of sync. The video autoplays but audio seems to start from beginning when I hit my mute / unmute button and does not start at the same point the video is playing at.
jQuery('.services-bgvideo-audiobutton').click(function(){
var currentAudioTime;
var currentVideoTime;
if( $("video").prop('muted') ) {
$("video").prop('muted', false);
jQuery('.services-bgvideo-audiobutton').removeClass('videomuted');
jQuery('.services-bgvideo-audiobutton').addClass('videonotmuted');
} else {
$("video").prop('muted', true);
jQuery('.services-bgvideo-audiobutton').removeClass('videonotmuted');
jQuery('.services-bgvideo-audiobutton').addClass('videomuted');
}
currentAudioTime = jQuery('video').get(0).currentTime;
console.log(currentAudioTime);
console.log($("video").prop('muted'))
});
Here is a link to the page in question (it is the second section, just below fold): https://vpscanada.com/test-services/
Here is a link to the video in question so that you can see audio is properly synced: https://vpscanada.com/wp-content/uploads/2022/01/services-bg-video-behindscroll2.mp4
As a workaround / last resort if no one else can figure this out, I may just export audio from the video and make a separate audio element. Then when the button is clicked I can get the timestamp for the video, set the timestamp for the audio element, then play the audio element. Of course I would rather not have to do that.
javascript
jquery
wordpress
video
divi
0 Answers
Your Answer