Canvas Support

Video auto play on Chrome mobile browser

2 replies · opened Aug 22, 2019

LLakitoimistoAug 22, 2019

Hi!

Question about video auto play on different mobile browsers. It works (on iOS) with Safari but not with Chrome: http://tyg.ee/oppima/index.html. With Chrome the video button is not even clickable.

How could I get the video auto play work with Chrome mobile browser?

Index file attached.

Thank you.

LLakitoimistoAug 22, 2019

<section id="slider" class="slider-element slider-parallax revslider-wrap clearfix">
<div class="slider-parallax-inner">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<div id="rev_slider_779_1_wrapper" class="rev_slider_wrapper fullwidth-container" data-alias="default-slider" style="padding:0px;">
<!-- START REVOLUTION SLIDER 5.1.4 fullwidth mode -->
<div id="rev_slider_779_1" class="rev_slider fullwidthbanner" style="display:none;" data-version="5.1.4">

<!-- SLIDE -->
<li class="dark" data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/s1-thumb.jpg" data-saveperformance="off" data-title="Tule avasta Sinu parim haridustee Tabasalu hariduslinnakus!">
<!-- LAYERS -->

							&lt;!-- LAYER NR. 1 --&gt;
							&lt;div class="tp-fade fadeout fullscreenvideo rs-background-video-layer" data-forcerewind="on" data-volume="mute" data-videowidth="100%" data-videoheight="100%" data-videomp4="tyg/failid/video/tule-avasta.mp4" data-videopreload="preload"
							  data-videoloop="loopandnoslidestop" data-forceCover="1" data-aspectratio="16:9" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="false"&gt;
							&lt;/div&gt;

							&lt;!-- "Tule avasta" @ EXTRA SMALL devices --&gt;
							&lt;div class="tp-caption customin ltl tp-resizeme tyg-tule-avasta-font tyg-tule-avasta-font-size d-block d-md-none" data-x="center" data-hoffset="0" data-y="top" data-voffset="260" data-speed="800" data-start="1400" data-easing="easeOutQuad"
							  data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="font-size: 90px;"&gt;Tule avasta&lt;/div&gt;

							&lt;!-- "Tule avasta" @ SMALL devices --&gt;
							&lt;div class="tp-caption customin ltl tp-resizeme tyg-tule-avasta-font tyg-tule-avasta-font-size d-none d-md-block d-lg-none" data-x="center" data-hoffset="0" data-y="top" data-voffset="245" data-speed="800" data-start="1400" data-easing="easeOutQuad"
							  data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="font-size: 100px;"&gt;Tule avasta&lt;/div&gt;

							&lt;!-- "Tule avasta" @ MEDIUM devices --&gt;
							&lt;div class="tp-caption customin ltl tp-resizeme tyg-tule-avasta-font tyg-tule-avasta-font-size d-none d-lg-block d-xl-none" data-x="center" data-hoffset="0" data-y="top" data-voffset="225" data-speed="800" data-start="1400" data-easing="easeOutQuad"
							  data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="font-size: 125px;"&gt;Tule avasta&lt;/div&gt;

							&lt;!-- "Tule avasta" @ LARGE devices --&gt;
							&lt;div class="tp-caption customin ltl tp-resizeme tyg-tule-avasta-font tyg-tule-avasta-font-size d-none d-xl-block" data-x="center" data-hoffset="0" data-y="top" data-voffset="225" data-speed="800" data-start="1400" data-easing="easeOutQuad"
							  data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="font-size: 125px;"&gt;Tule avasta&lt;/div&gt;

							&lt;!-- "Sinu parim haridustee Tabasalu hariduslinnakus!" @ ALL devices --&gt;
							&lt;div class="tp-caption customin ltl tp-resizeme revo-slider-desc-text" data-x="center" data-hoffset="0" data-y="top" data-voffset="370" data-width="['650','650','480','360']" data-speed="800" data-start="1550" data-easing="easeOutQuad"
							  data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-textAlign="center" data-endeasing="Power4.easeIn" style="z-index: 3; max-width: 650px; white-space: normal; font-size: 32px; font-weight: 300; opacity: .8; color: #FFF; text-shadow: #444444 2px 2px 2px;"&gt;Sinu
								parim haridustee Tabasalu hariduslinnakus! &lt;/div&gt;

						
					
				&lt;/div&gt;
			&lt;/div&gt;&lt;!-- END REVOLUTION SLIDER --&gt;
		&lt;/div&gt;
	&lt;/section&gt;
SSemicolon WebSTAFFAug 22, 2019

Hello,

Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User's Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

We are definitely keeping an eye on the Latest Updates by Apple and Android to allow the auto-playing of HTML5 Videos on their respective phones and as soon as they release an Update we will surely make this available. The HTML5 Video on Mobile Devices do not work on any Website.

Hope this Helps!

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

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