Viewing 30 posts - 1 through 30 (of 33 total)
  • Author
    Posts
  • #898515

    Dear Ismael.
    The topic Adding button to mute/unmute audio on fullscreen background video is closed to new replies.
    So I’m writing here.

    I add this in the functions.php file:

    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
    }

    And this to custom.css:

    .custom-mute {
    	display: block;
    	background-image: url('my site/unmute.png');
    	background-size: 40px;
    	width: 40px;
    	height: 40px;
    	position: absolute;
    	bottom: 40px;
    	right: 40px;
    	z-index: 1000;
    }
    .custom-mute:hover {
    	opacity: 0.5;
    }
    .icon-sound-on {
    	background-image: url('my site/mute.png');
    }
    @media only screen and (max-width: 1290px) {
    .custom-mute {
    	right: 190px;
    }
    }

    But this code doesn’t work((
    I can press the button and it changes, but there is no sound in background video((

    And I use direct mp4 video from my site!

    Look Private Content, please.

    • This topic was modified 6 years, 11 months ago by AliAbabwa.
    #898545

    And how can I fix the bug with background video?
    Look video question in Private Content, please.

    #901050

    Hi,

    That is something we are still working to get it shorted asap for you guys,
    we do appreciate the patience.

    Best regards,
    Basilis

    #908531

    Dear, Basilis.
    Now I updated Enfold theme from 4.2 to 4.2.2.
    There is no bug from January 17, 2018 at 5:06 pm now.

    But still have a problem with direct mp4 video (January 17, 2018 at 4:34 pm).
    I can press the button and it changes, but there is no sound in background video((

    #908761

    Hi,

    We understand the frustation. We have solved the issue just today ( and you can read that it is not related with Enfold on tomorrow release ) and we will push a fix by tomorrow.

    Thank you very much

    Best regards,
    Basilis

    #911793

    Dear Basilis.
    So, any news?

    #912074

    Hi,

    Alright. Let’s start with the color section modification first. Did you edit the sections.php file and enable the audio?

    // https://kriesi.at/support/topic/adding-audio-option-on-fullscreen-background-video-2/#post-903302

    Best regards,
    Ismael

    #912217

    Hi,
    My section.php:
    'video_mute' => true,

    #912588

    Hey!

    You have to set the “video_mute” parameter to false to enable the audio of the video inside the color section.

    Cheers!
    Ismael

    #912718

    Dear Ismael.
    ‘video_mute’ =>false
    Yes it work’s.
    But I don’t need sound to be by default after loading the page.
    I need it when I click on the button only.

    #912727

    well i have made a section.php in which this is a checkbox to have audio or not.
    But it is some time ago. So i will see to update it to the newest enfold file.

    this here is an enfold 4.1 based sections.php : Download
    but it has allready the screenoptions dialog – i guess there weren’t changings till that. It works on my 4.2.3 Enfold
    Best is to have it in child-theme!

    But it is no frontend solution ( all browsers have on top in the tab a mute button)
    But you can choose to have audio or not

    click to enlarge

    #912737

    Thank you Guenni007.
    I replace my standard file section.php to your section-for41.php.zip and now I see mute video checkbox.
    O.k. I mute this and so…? I have a page without sound by default and without sound when I click on button “unmute”((

    #912740

    uncheck if you want to have audio
    this is by default muted (on good reasons) because if you have more than one background video per site it will be a mess.

    hear yourself: https://webers-testseite.de/3-4th-centered/

    #912746

    I know.
    But question is about mute/unmute button on page:
    https://netpics.org/image/DL9c7

    This button
    https://netpics.org/image/DL9c7
    is working (mute/unmute sound of video) if the video on page loading with sound by default.
    But I don’t need it!

    I need the page to be loaded without sound and this
    https://netpics.org/image/DL9c7
    button to be work (for unmute/mute sound of video).

    #912756

    well i have to download a video file with sound – i guess with youtube videos it will not work.

    #912762

    Dear Guenni007.
    Look at my first post of this topic from January 17, 2018 at 4:34 pm
    “But this code doesn’t work((
    I can press the button and it changes, but there is no sound in background video((
    And I use direct mp4 video from my site!

    I do not use youtube video, I use direct mp4 video from my site.

    #912765

    so look again to the test page. if you have my section.php and uncheck the page playes the sound and you can switch with that button.
    I think the function has to be adjusted that it beginns with clicked status. Don’t know how to.
    https://webers-testseite.de/3-4th-centered/

    to your images mute and unmute
    – do you have adjusted the css from above and link to your mute/unmute png files?
    did your gave the color-section the custom-class: av-section-color-overlay-wrap ?

    #912770

    Dear Guenni007. Thank you for you response!

    I think the function has to be adjusted that it beginns with clicked status.

    So, maybe some of support moderators can help, what should I’ve to change in this function?
    Look at my first post of this topic from January 17, 2018 at 4:34 pm

    #912772

    if there is content in private content – i’m participant as you are.

    #913117

    Hi,

    Alright. Please post the login details in the private field. Maybe, we can enable the audio by default and then trigger the mute button on page load.

    Best regards,
    Ismael

    #913280

    Thank you, Ismael.
    Look private content, please.

    #913283

    But please report about solution.

    #914131

    Hi,

    Thank you for the info.

    I can’t find the right order of the video events so I added this script to pause the video momentarily, mute and then play it again.

    		$('.av-video-slide').on('av-video-loaded', function() {
    			setTimeout(function() {
    				$('.mejs-pause button').trigger('click');
    			}, 500);
    
    			setTimeout(function() {
    				$('.mejs-play button').trigger('click');
    				$('.custom-mute').trigger('click');
    			}, 600);
    		});  	

    You may hear the sound on load a bit.

    Best regards,
    Ismael

    #914195

    Thank you Ismael.
    But this doesn’t work in Google Chrome((

    #914620

    Hi,

    I’m actually testing it on Chrome. Please remove the browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    #914787

    I open the site on another computer on which this site was never launched. Unmute button doesn’t work too(( (there was no sound after I click on it)
    On my computer I remove the browser cache and relaunch it, but the button Unmute works just from time to time. Sometimes it’s work, sometimes – not. I mean, when it is not work, I should refresh browser, and after this it’s maybe will work.

    • This reply was modified 6 years, 10 months ago by AliAbabwa.
    #915223

    Hi,

    Please try to replace the code above with this.

    $(window).load(function() {
          $('.custom-mute').trigger('click');
    });

    Best regards,
    Ismael

    #915428

    Hi,
    I have replaced the code

    		$('.av-video-slide').on('av-video-loaded', function() {
    			setTimeout(function() {
    				$('.mejs-pause button').trigger('click');
    			}, 500);
    			
    			setTimeout(function() {
    				$('.mejs-play button').trigger('click');
    				$('.custom-mute').trigger('click');
    			}, 700);
    		});

    to code

    $(window).load(function() {
          $('.custom-mute').trigger('click');
    });

    and still no effect in Google Chrome((

    • This reply was modified 6 years, 10 months ago by AliAbabwa.
    #915814

    Hi,

    Thank you for the update. We replaced the script with this.

    	<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>

    It should work now.

    Best regards,
    Ismael

    #915971

    Thank you so much, Ismael.
    At last, it’s work in all browsers now)

Viewing 30 posts - 1 through 30 (of 33 total)
  • The topic ‘Adding button to mute/unmute audio on fullscreen background video’ is closed to new replies.