我在cms系统中使用Revolution滑块。第一张幻灯片是视频文件,所有下一张都包含图像。视频结束后,我想自动滑动下一张幻灯片,但是现在视频结束时什么也没发生,我必须单击项目符号以播放下一张幻灯片。 这是代码:
foreach ($homeSliders as $s => $homeSlider)
{
if ($homeSlider->getVideo()) { ?>
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" class="sliderSlide">
<div class="tp-caption customin fullscreenvideo"
data-x="0"
data-y="0"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="700"
data-start="500"
data-easing="Power4.easeInOut"
data-endspeed="700"
data-autoplay="true"
style="z-index: 2"
>
</div>
<video class="video-js vjs-default-skin" id="vid" preload="false" autoplay muted controls width="100%" height="100%" data-setup="{}">
<source src="<?=$homeSlider->getVideo($homeSlider->id)?>?rel=0" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>
<script>
var video_play = $('#vid');
video_play.on('canplay', function() {
video_play.trigger('play');
});
</script>
</li>
<?php }else{ ?>
<li style="display: none;" class="sliderSlide"
<?php if(isset($homeSlider->effect->title) and $homeSlider->effect->title!=''){
echo 'data-transition="'.$homeSlider->effect->title.'"';
}else{
echo 'data-transition="fade"';
} ?> >
<img class="bigImgHide" src="<?= $homeSlider->getImg($homeSlider->id) ?>" <?=($homeSlider->kenburns == 1 ? $ken : '')?>>
<?php }
} ?>
<?php
echo '</li>';
}
}