Revolution Slider - HTML5 Videos

#1
I apologize in advance, but I am completely new to working straight in HTML template packages (mostly a WP guru myself). In any case, I am trying to put in a full screen HTML5 video into revolution slider. I am using the barber shop homepage and have been following the documentation from revolution slider but it does not seem to be working.

I am doing this all locally on my machine, but I don't think that matters (again kind of new to this stuff). I have all the files and am referencing them correctly. I am able to embed vimeo and youtube videos successfully so I am not sure what is different about doing HTML5 videos. IF you can shed any light on this for me, I would really appreciate it. THANKS!

Here is the the full markup for the slider I am using:

Code: Select all

<!-- Slider -->
                            <div class="fw_block bg_start wall_wrap">
                                <div class="row">
                                    <div class="col-sm-12 first-module module_slider module_cont pb0 fullwidthslider">
                                        <div class="slider_container mb80">
                                            <div class="fullwidth_slider">
                                                <ul>
                                                    <!-- SLIDE 1 -->
                                                    <li data-index="rs-1" data-transition="fade" data-slotamount="1" data-masterspeed="700" >
                                                        <img src="img/slider/barber_shop_bg.jpg" alt="slide1" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" />
                                                        <!-- LAYER NR. 1 -->
                                                        <div class="tp-caption tp-fade fadeout fullscreenvideo"
                                                            data-x="0"
                                                            data-y="0"
                                                            data-speed="1000"
                                                            data-start="1100"
                                                            data-easing="Power4.easeOut"
                                                            data-endspeed="1500"
                                                            data-endeasing="Power4.easeIn"
                                                            data-autoplay="true"
                                                            data-autoplayonlyfirsttime="false"
                                                            data-nextslideatend="true"
                                                            data-forceCover="1"
                                                            data-dottedoverlay="twoxtwo"
                                                            data-aspectratio="16:9"
                                                            data-forcerewind="on"
                                                            style="z-index: 2">
                                           
                                           
                                                             <video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
                                                            poster='img/slider/barber_shop_bg.jpg' data-setup="{}">
                                                            <source src='revolution/videos/demo.mp4' type='video/mp4' />
                                                            <source src='revolution/videos/demo.webm' type='video/webm' />
                                                            <source src='revolution/videos/demo.ogv' type='video/ogg' />
                                                            </video>
                                           
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- //Slider -->

Re: Revolution Slider - HTML5 Videos

#7
Hello Alisa,
Sorry for the delay.

We received your package and the coder tested it.
You added everything correctly, but why it doesn't work we don't understand.
Did you try to ask question on the Revolution slider forum?

Regards,
Jane
Jane Clarks

GT3themes Support Team
Discover the Power of GT3themes Products

Re: Revolution Slider - HTML5 Videos

#8
Hi Jane,

Thanks for responding. I did not contact them, as I have been able to make everything else work correctly except this feature. I figured it might be something related to the theme. I will contact them as well, however, I would appreciate it if you could explore the problem further. If this is a bug in the template, it would be nice to get fixed.

Thanks!
Post Reply

Return to “EliteMasters | Multi-Purpose Website Template”

Who is online

Users browsing this forum: No registered users and 1 guest