Hi there,
The boss wants viewers to control the sound of the homepage video (the fullscreen-slider video) with the mute/unmute button. Per your response to one old ticket, I added the Controls attribute to the video element, but it did not work. What am I doing wrong. If the feature exists I would like to have just the mute/unmute button without the play and stop buttons.
Thank you in advance for your help.
Regards,
Mille
Hello,
You can consider using this Template: http://themes.semicolonweb.com/html/canvas/index-video-sound-event.html .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi There,
Thank you for your God send advice. As per your advice, I went ahead and used the video-sound-event page and the video did not work. The funny thing is when I inspect the page in chrome it started working (The mute button still did not work.) and when I reload the page it stopped working. Also, the menu color won't take theme color (purple) instead it takes the original green color. But when I scroll down it takes the theme color that was changed in color.css. I have uploaded the new version in the link here: https://zeehealer.com/staging/index.html. What I am doing wrong? Appreciate your advice.
Thank you in advance.
Regards,
Mille
One more thing. I imported the old content into the new index-video-sound-event.html page so that I can preserve all the page's features.
Thank you.
Mille
Hi There,
I reconstructed the page again one change at a time and I started getting the error when I removed the first slide. When I kept the first slide and removed the third slide the mute button stopped working. I also tried to move the second video slide to the front and that did not work either. I was going to move it upfront and remove the slider arrows. My aim is to have one video slide. Oh well, I hope you have a workaround for this. I really appreciate your assistance.
Thank you in advance.
Regards,
Mille
Hello,
We have checked out your codes and they appear to be fine. Several points to note:
Autoplay is only enabled when the Video is muted. If the Video has sound, the autoplay will disabled by the Browsers.
We can see some Console errors regarding Site Manifest which might be causing an issue with Site Mute/Unmute.
Please fix the Duplicate ID Codes as mentioned here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fzeehealer.com%2Fstaging%2Findex.html and update the codes online. If the issues are still not resolved, please let us know so that we can check this further. Thanks for your Patience.
To change the Colors, please make sure that you follow this guide: http://docs.semicolonweb.com/docs/getting-started/color-schemes/ and not edit the style.css File.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi There,
I tested removing the first slider and third slider on the original index-video-sound-event.html you suggested I use without adding any content of my own and it did not work. My aim is to have the audio and have the ability to mute it with a button. Is there a way I can do that by just having the video slider show and the rest be hidden? Appreciate your help.
Thank you in advance.
Regards,
Mille
Hello,
Apologies for the Delays in replying and Thanks for your Patience!
The Slider will not autoplay if it is not muted. It is not controlled by us but the Browsers. If you are planning to use just the Video, it is recommended to remove the entire Slider Area. Simply replace the existing #slider block with the following code:
<section id="slider" class="slider-element min-vh-100 dark include-header">
<div class="slider-inner">
<div class="container">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">Welcome to Canvas</h2>
</div>
</div>
<a href="#" id="video-slider-mute" class="video-muted"><i class="icon-line2-volume-2"></i><i class="icon-line2-volume-off"></i></a>
<div class="video-wrap" style="z-index: 1;">
<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
<source src='images/videos/explore.mp4' type='video/mp4' />
<source src='images/videos/explore.webm' type='video/webm' />
</video>
<div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"></div>
</div>
</div>
</section>This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi there,
Thank you for your response and advice. Where is the unmute button that was in the video section? I was looking for the mute button. I don't see the mute button on the section posted above. I will be happy to have the video start muted.
Thank you in advance for your help.
Regards,
Mille
Hello,
Simply add the z-index: 5; CSS property to the existing #video-slider-mute CSS Block at the top of the Page.
This will definitely work fine and display the Mute/Unmute button. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi there,
That did it, thank you so much for your assistance.
Regards,
Mille
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard