Adding button to mute/unmute audio on fullscreen background video

Hi,

That’s perfect for me, but I want my video to be unmute when loading the page, and the button to mute it if the visitor doesn’t want the sound (it’s a video for a music group, so the sound is important !). I tried to invert with video[0].setMuted(false); video[0].setVolume(0.8); under the var declaration, but it doesn’t work… Can you tell me how I can do that please ?

Thank you !

Hi,

I test it on a private page. I want the video to be unmute by default, and the button to mute / unmute. The link you gave me, I already saw it but the file to implement is not downoadable anymore … Can you help ?

Thanks ;)

Hi,
I did change on my section.php file to have : ‘video_mute’ => false.
Then I added that in my functions.php: to be able to change betwwen mute / unmute.
add_action(‘wp_footer’, ‘ava_custom_script’);
function ava_custom_script(){
?>
<script type=”text/javascript”>
(function($) {
$(‘.avia_video’).on(‘av-mediajs-loaded’, function() {
$(‘.av-section-color-overlay-wrap’).prepend(‘<div class=”custom-mute”></div>’);
var video = $(this).mediaelementplayer();
video[0].setMuted(true);
$(‘.av-section-color-overlay-wrap’).on(‘click’, ‘.custom-mute’, function() {
if(video[0].muted === true) {
video[0].setMuted(false);
video[0].setVolume(0.8);
} else {
video[0].setMuted(true);
}
});
});

$(‘.av-section-color-overlay-wrap’).on(‘click’, ‘.custom-mute’, function() {
$(this).toggleClass(“icon-sound-on”);
});
})(jQuery);
</script>

I would like the video to be Muted = false at the beginning, but if I change to video[0].setMuted(flase); , I have an error occuring…

Oh yes, it works… So simple ;)

Thanks a lot !

Hi perfect !

It work perfectly with a self hosted video, but it seems it’s not working with a viemo or youtube video ?
Is ther a way to do that ?

Thanks

https://handidev.necessary.fr/wp-content/uploads/2020/12/Capture-decran-2020-12-18-a-17.38.03.png

The error doesn’t come up when I remove this part :

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
	?>
		<script type="text/javascript">
	(function($) {	
		$('.avia_video').on('av-mediajs-loaded', function() {
			$('.av-section-color-overlay-wrap').prepend('<div class="custom-mute"></div>');
			var video = $(this).mediaelementplayer();
			video[0].setMuted(true);
			$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
				if(video[0].muted === true) {
					video[0].setMuted(false);
					video[0].setVolume(0.8);
				} else {
					video[0].setMuted(true);
				}		
			});
		});
		
		$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
			$(this).toggleClass("icon-sound-on");
		});
	})(jQuery);
	</script>
	<?php
}

Very strange!!!

I have a problem with safari,
I have also a problem with the audio of my video: sometime (I don’t know exactly when, often on my iPad, sometime on firefox the sound is like it was 2 différent soundtracks with few milliseconds of difference… I don’t know if I’m clear…

I tried to encode the video different ways, but still strange…

Thanks

Mh – that class isn’t added to mediaelementwrapper video : av-mediajs-loaded in Safari!
so the trigger for that function does not exist on safari.
On Firefox and Chrome this class is added when the video has fully loaded.

Hello and happy new year everybody.

Any leads on this problem on safari?

Thanks again!

Hello guy’s,

I moved the website to the final destination, I did the last update of wordpress and something seems to be différent on safari: at the load of the page, the autoplay doesn’t work and the video don’t start, keeping a black screen. Il I click on the red volum button, the video starts and the sound is there!!!

Now, I just have to found out how to autostart the video on safari (autoplay works on chrome and firefox).

Thanks a lot!

Now I have this message in the console:

https://handiamo.com/wp-content/uploads/2021/01/Capture-decran-2021-01-29-a-10.23.25.png

Thanks again for your help!

Best regards