-
AuthorPosts
-
January 17, 2018 at 4:34 pm #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.
January 17, 2018 at 5:06 pm #898545And how can I fix the bug with background video?
Look video question in Private Content, please.January 22, 2018 at 11:42 pm #901050Hi,
That is something we are still working to get it shorted asap for you guys,
we do appreciate the patience.Best regards,
BasilisFebruary 6, 2018 at 12:41 pm #908531Dear, 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((February 6, 2018 at 8:03 pm #908761Hi,
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,
BasilisFebruary 13, 2018 at 5:23 pm #911793Dear Basilis.
So, any news?February 14, 2018 at 3:45 am #912074Hi,
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,
IsmaelFebruary 14, 2018 at 11:57 am #912217Hi,
My section.php:
'video_mute' => true,
February 15, 2018 at 3:24 am #912588Hey!
You have to set the “video_mute” parameter to false to enable the audio of the video inside the color section.
Cheers!
IsmaelFebruary 15, 2018 at 12:04 pm #912718Dear 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.February 15, 2018 at 12:43 pm #912727well 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 notFebruary 15, 2018 at 1:10 pm #912737Thank 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”((February 15, 2018 at 1:14 pm #912740uncheck 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/
February 15, 2018 at 1:39 pm #912746I know.
But question is about mute/unmute button on page:
https://netpics.org/image/DL9c7This 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).February 15, 2018 at 1:56 pm #912756well i have to download a video file with sound – i guess with youtube videos it will not work.
February 15, 2018 at 2:04 pm #912762Dear 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.
February 15, 2018 at 2:06 pm #912765so 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 ?February 15, 2018 at 2:38 pm #912770Dear 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 pmFebruary 15, 2018 at 2:42 pm #912772if there is content in private content – i’m participant as you are.
February 16, 2018 at 5:31 am #913117Hi,
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,
IsmaelFebruary 16, 2018 at 2:45 pm #913280Thank you, Ismael.
Look private content, please.February 16, 2018 at 2:57 pm #913283But please report about solution.
February 19, 2018 at 5:38 am #914131Hi,
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,
IsmaelFebruary 19, 2018 at 11:11 am #914195Thank you Ismael.
But this doesn’t work in Google Chrome((February 20, 2018 at 2:19 am #914620Hi,
I’m actually testing it on Chrome. Please remove the browser cache or hard refresh before checking the page.
Best regards,
IsmaelFebruary 20, 2018 at 11:12 am #914787I 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.
February 21, 2018 at 4:57 am #915223Hi,
Please try to replace the code above with this.
$(window).load(function() { $('.custom-mute').trigger('click'); });
Best regards,
IsmaelFebruary 21, 2018 at 1:20 pm #915428Hi,
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.
February 22, 2018 at 3:06 am #915814Hi,
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,
IsmaelFebruary 22, 2018 at 11:30 am #915971Thank you so much, Ismael.
At last, it’s work in all browsers now) -
AuthorPosts
- The topic ‘Adding button to mute/unmute audio on fullscreen background video’ is closed to new replies.