Revolution Slider Видео HTML5 контролирует - PullRequest
Новая
       27

Revolution Slider Видео HTML5 контролирует

0 голосов
/ 24 октября 2018

Я бы хотел показать элементы управления проигрывателем HTML5 революции на странице.Если пользователь наводит курсор на видео, должны появиться элементы управления.Если они нажимают кнопку воспроизведения, то элементы управления должны оставаться видимыми, даже если их мышь покидает элемент видео.

Кажется, я не могу заставить это работать, используя следующий код.Кто-нибудь может определить проблему?

'; 

            foreach ($homeSliders as $s => $homeSlider)
            {   
                if ($homeSlider->getVideo()) { ?>
                         <li data-index="rs-162" data-transition="zoomout" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-thumb="https://revolution.themepunch.com/wp-content/uploads/revslider/classicslider/fitness-70x70.jpg"  data-rotate="0"  data-saveperformance="off"  data-title="HTML5 Video" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="{&quot;revslider-weather-addon&quot; : { &quot;type&quot; : &quot;&quot; ,&quot;name&quot; : &quot;&quot; ,&quot;woeid&quot; : &quot;&quot; ,&quot;unit&quot; : &quot;&quot; }}" data-description="">
                            <img data-bgposition="center center" data-bgfit="cover" class="rev-slidebg" data-no-retina src="https://revolution.themepunch.com/wp-content/uploads/revslider/classicslider/fitness.jpg">

                            <div class="rs-background-video-layer" 
                                        data-forcerewind="on" 
                                        data-volume="mute" 
                                        data-videowidth="100%" 
                                        data-videoheight="100%" 
                                        data-videomp4="<?=$homeSlider->getVideo($homeSlider->id)?>" 
                                        data-videopreload="auto" 
                                        data-videoloop="none" 
                                        data-forceCover="1" 
                                        data-aspectratio="16:9" 
                                        data-autoplay="true" 
                                        data-autoplayonlyfirsttime="false" 
                                        data-nextslideatend="true" 
                            ></div>
                            <div class="tp-caption NotGeneric-Title   tp-resizeme" 
                                         id="slide-162-layer-1" 
                                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                         data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                                                    data-fontsize="['70','70','70','45']"
                                        data-lineheight="['70','70','70','50']"
                                        data-width="none"
                                        data-height="none"
                                        data-whitespace="nowrap"

                                        data-type="text" 
                                        data-responsive_offset="on" 

                                        data-frames='[{"from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","speed":1500,"to":"o:1;","delay":1000,"split":"chars","splitdelay":0.05,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
                                        data-textAlign="['left','left','left','left']"
                                        data-paddingtop="[10,10,10,10]"
                                        data-paddingright="[0,0,0,0]"
                                        data-paddingbottom="[10,10,10,10]"
                                        data-paddingleft="[0,0,0,0]"

                                        style="z-index: 19; white-space: nowrap;text-transform:left;">HTML5 VIDEO </div>

                                    <!-- LAYER NR. 16 -->
                                    <div class="tp-caption NotGeneric-SubTitle   tp-resizeme" 
                                         id="slide-162-layer-4" 
                                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                                         data-y="['middle','middle','middle','middle']" data-voffset="['52','52','52','51']" 
                                                    data-width="none"
                                        data-height="none"
                                        data-whitespace="nowrap"

                                        data-type="text" 
                                        data-responsive_offset="on" 

                                        data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
                                        data-textAlign="['left','left','left','left']"
                                        data-paddingtop="[0,0,0,0]"
                                        data-paddingright="[0,0,0,0]"
                                        data-paddingbottom="[0,0,0,0]"
                                        data-paddingleft="[0,0,0,0]"

                                        style="z-index: 20; white-space: nowrap;text-transform:left;">AND LOTS OF OTHER MEDIA </div>



                            </li>
...