Home Forums Porto Template Autplay Video – Possible?

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 2 months ago. This post has been viewed 112 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10027374

    JohnAlan
    Participant

    Hi,

    I see from previous threads that Chrome won’t autoplay video and that there’s no workaround.

    I came across wearexyz.com which has a full screen autolpay silent video, working even in Chrome. This worked even with no previous interaction from me on that site.

    Maybe there’s a method used there that can be analysed and used in Porto?



    Template Version: 6.2.1
    #10027377

    Support2
    Keymaster

    Hello,

    Thank you for the suggestion.
    Chrome allow autoplay only for muted videos.

    The Revolution Slider team released a new version where automatically “mute” the videos that has “autoplay” defined. To get a revolution slider autoplay video working, please follow the steps below:

    1) Download the latest version of Revolution Slider on link below:
    https://www.dropbox.com/s/cdocp8a37xqqzlh/revslider-plugin.zip?dl=0

    Extract the folder on the path “/vendor” of your project.

    2) Here is a example code of muted video with autoplay:

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 500, 'gridheight': 500, 'responsiveLevels': [4096,1200,992,500]}">
    		<ul>
    			<li data-transition="fade">
    				<img src="video/landing.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="rs-background-video-layer" 
    					data-forcerewind="on" 
    					data-volume="mute" 
    					data-videowidth="100%" 
    					data-videoheight="100%" 
    					data-videomp4="video/landing.mp4" 
    					data-videopreload="preload" 
    					data-videoloop="loop" 
    					data-forceCover="1" 
    					data-aspectratio="16:9" 
    					data-autoplay="true" 
    					data-autoplayonlyfirsttime="false" 
    					data-nextslideatend="false" 
    				></div>
    
    			</li>
    		</ul>
    	</div>
    </div>

    * Note the data-volume="mute".

    3) Here is a example for youtube video with autplay:

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider manual" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 500, 'gridheight': 500, 'responsiveLevels': [4096,1200,992,500]}">
    		<ul>
    			<li data-transition="fade">
    				<img src="video/landing.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="tp-caption tp-resizeme tp-videolayer fullscreenvideo" 
    
    				    data-type="video" 
    				    data-start="0"
    				    data-ytid="iyuxFo-WBiU" 
    				    data-videowidth="100%" 
    				    data-videoheight="100%" 
    				    data-autoplay="on" 
    				    data-videocontrols="none" 
    				    data-nextslideatend="true" 
    				    data-forcerewind="on" 
    				    data-videoloop="loopandnoslidestop" 
    				    data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&origin=http://www.okler.net;" 
    				    data-x="center" 
    				    data-y="center" 
    				    data-hoffset="0" 
    				    data-voffset="0" 
    				    data-basealign="slide"></div>
    				
    			</li>
    		</ul>
    	</div>
    </div>

    We will update the Revolution Slider on the next version of Porto.

    You can also autoplay videos without the Revolution Slider (with tag <video> of HTML5). Just remember to set the attribute muted, for example:

    <video controls muted autoplay>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 2 months ago by  Support2.
Viewing 2 posts - 1 through 2 (of 2 total)