Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 1, 2024 at 10:06 pm #1432773
    clbdcnpafe

    Hello.

    We are aware that most browsers like Chrome, Edge etc purposefully prevent audio playing when a video (set to autoplay) loads with a webpage. Our question is this: is there any code that we can use, for example in a button labeled “Turn On The Sound”, that will turn on the audio. In the Private Content, I’m including a link and password to a page where we would use such a feature if it existed. You will see that we have told page visitors to scroll down to the video player bar to turn on the sound. That’s a less-than-the-best-user-friendly solution. So if there’s a “button” solution that we could use instead, we would.

    Many thanks.

    February 1, 2024 at 10:08 pm #1432774
    clbdcnpafe

    Forgot to turn on email notification. Doing so here.

    February 2, 2024 at 5:55 am #1432783
    Guenni007

    this solution i guess is still working – but a bit more complex than other snippet solutions.
    And i guess that this will only work for selfhosted html5 videos!
    And I really don’t know why it’s still working because I’ve had a lot of upgrades since that trials from 2018/19 and no customization of section.php nor child-theme section.php. So maybe you start trying it without that changing.

    for video-bg in color-section:
    https://webers-testseite.de/mute-unmute/
    for video-bg in slider:
    https://webers-testseite.de/mute-unmute-video-slide/

    for a video element ( not as background ) , you may be able to extract from the code how the mute/unmute can be influenced by a click event. I could also imagine that a small button next to the video ALB element could accomplish this.

    February 3, 2024 at 4:43 pm #1432881
    Mike

    Hi,
    Thank you Guenni007 for your examples, the private page that clbdcnpafe linked to uses a video element with a vimeo video link, and unfortunately the video mute option is from vimeo inside of an iframe. So as you pointed out, the videos must be self-hosted.
    Based on Guenni007’s script I modified it some to create a button to enabled the sound on self-hosted videos, this is my example page, and this is what the button looks like:
    Enfold_Support_4606.jpeg
    This is the css for the Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .custom-mute {
    display: block;
    color: #fff;
    font-size: 40px;
    padding: 20px;
    border: solid 2px #fff;
    position: absolute;
    bottom: 50%;
    right: 36%;
    z-index: 50;
}
.custom-mute.sound-on {
	display: none;
}

    This is the code for the end of the child theme functions.php file in Appearance ▸ Editor:

    function custom_script() { ?>
  <script>
(function($) {  
    $('.avia-video').prepend('<div class="custom-mute">Click to unmute</div>');
      $('.avia-video').on('click', '.custom-mute', function() {
        $('video').prop('muted', !$("video").prop('muted'));
      });
    
    $('.avia-video').on('click', '.custom-mute', function() {
      $(this).toggleClass("sound-on");
    });
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

    This doesn’t require any theme files to be modified because it is only for the video element and not a background video in a color section or the slider element as Guenni007’s examples, in these cases please follow Guenni007’s post.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.