2 years ago

#71247

test-img

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

Accepted video resources