我想在页面上显示革命性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="{"revslider-weather-addon" : { "type" : "" ,"name" : "" ,"woeid" : "" ,"unit" : "" }}" 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>