Canvas Support

how to make Slider Video to autoplay

4 replies · opened Dec 16, 2019

Wwijet_Dec 16, 2019

Hello. I'm currently trying to make a video AUTOPLAY on my main page as the FIRST item in the slider to show. I'm aware that if I press the "next" button it plays. is this possible?
using: FLEX SLIDER: DEFAULT LAYOUT

THE ENTIRE SECTION LOOKS LIKE THIS: (STILL UNDER CONSTRUCTION)

<section id="slider" class="slider-element slider-parallax swiper_wrapper clearfix" data-autoplay="7000" data-speed="650" data-loop="true">

		&lt;div class="slider-parallax-inner"&gt;

			&lt;div class="swiper-container swiper-parent autoplay"&gt;
				&lt;div class="swiper-wrapper autoplay"&gt;
                    
					&lt;div class="swiper-slide dark autoplay"&gt;
                        
						&lt;div class="video-wrap no-placeholder"&gt;
							&lt;video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline&gt;
								&lt;source src='images/videos/explore.mp4' type='video/mp4' /&gt;
							&lt;/video&gt;
							&lt;div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"&gt;&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
                    
                    
                    
                    &lt;div class="swiper-slide dark" style="background-image: url('images/slider/swiper/1.jpg');"&gt;
						&lt;div class="container clearfix"&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="swiper-slide dark"&gt;
						&lt;div class="container clearfix"&gt;
							&lt;div class="slider-caption slider-caption-center"&gt;
								&lt;h2 data-animate="fadeInUp"&gt;Beautifully Flexible&lt;/h2&gt;
								&lt;p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200"&gt;Looks beautiful & ultra-sharp on Retina Screen Displays. Powerful Layout with Responsive functionality that can be adapted to any screen size.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class="video-wrap no-placeholder"&gt;
							&lt;video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline&gt;
								&lt;source src='images/videos/explore.mp4' type='video/mp4' /&gt;
								&lt;source src='images/videos/explore.webm' type='video/webm' /&gt;
							&lt;/video&gt;
							&lt;div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"&gt;&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="swiper-slide" style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;"&gt;
						&lt;div class="container clearfix"&gt;
							&lt;div class="slider-caption"&gt;
								&lt;h2 data-animate="fadeInUp"&gt;Great Performance&lt;/h2&gt;
								&lt;p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200"&gt;You'll be surprised to see the Final Results of your Creation & would crave for more.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="slider-arrow-left"&gt;&lt;i class="icon-angle-left"&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;div class="slider-arrow-right"&gt;&lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;div class="slide-number"&gt;&lt;div class="slide-number-current"&gt;&lt;/div&gt;&lt;span&gt;/&lt;/span&gt;&lt;div class="slide-number-total"&gt;&lt;/div&gt;&lt;/div&gt;
			&lt;/div&gt;

		&lt;/div&gt;

	&lt;/section&gt;
SSemicolon WebSTAFFDec 17, 2019

Hello,

This is not the Flex Slider but the Canvas Swiper Slider.

We have just checked out the Video on the First Slide and it appears to be autoplaying for us by default. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Wwijet_Dec 18, 2019

thanks for the response, I just uploaded the index.html to www.broadvalleycustomprecast.com.

even when using the ORIGINAL Explore.mp4 it's still not loading the video.

Wwijet_Dec 18, 2019

I'm currently editing some things on the file. upon some further analysis, I've realized that it plays using GOOGLE CHROME. but not BRAVE browser

SSemicolon WebSTAFFDec 19, 2019

Hello,

Thanks for more information regarding this. Unfortunately, the case here might be that the BRAVE Browser is blocking the Autoplay and since this is a Browser Controlled feature, we cant control anything here with external codes. Also, currently we do not support BRAVE Browser explicitly and only the Browsers mentioned here: https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123 are supported.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

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