我在CMS框架Yii2上使用Revolution Slider。第一张幻灯片是视频-在html5视频播放器中格式为mp4，其他所有幻灯片均带有图像背景和文字。当滑块的第一根是-一切正常，但是当再次返回带有视频的第一张幻灯片时-视频无法播放，幻灯片也不会改变。 我想再次播放视频，并在视频播放完后在第二张幻灯片上滑动。 这是代码：
<div id="rev_slider_44_1_wrapper" class="slider-parallax revslider-wrap rev_slider_wrapper fullwidthbanner-container">
<div class="tp-banner" id="rev_slider_4_1">
<ul> <!-- SLIDE -->';
foreach ($homeSliders as $s => $homeSlider)
{
if ($homeSlider->getVideo()) { ?>
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000">
<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="true" autoplay muted controls width="100%" height="100%"
data-setup="{}">
<source src="<?=$homeSlider->getVideo($homeSlider->id)?>" 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" >
<img class="bigImgHide" src="<?= $homeSlider->getImg($homeSlider->id) ?>" <?=($homeSlider->kenburns == 1 ? $ken : '')?>>
<div class="tp-caption <?= ((isset($homeSlider->title_show) and $homeSlider->title_show!='') ? $homeSlider->title_show : 'sft') ?> tp-resizeme revo-slider-emphasis-text nopadding noborder tp-resizing-positions-title"
data-x="<?=((isset($homeSlider->title_top) and $homeSlider->title_top!='') ? $homeSlider->title_top : '25%')?>"
data-y="<?=((isset($homeSlider->title_left) and $homeSlider->title_left!='') ? $homeSlider->title_left : '20%')?>"
data-speed="700"
data-start="1200"
data-easing="<?= ((isset($homeSlider->effect->title) and $homeSlider->effect->title!='') ? $homeSlider->effect->title : 'fadeIn') ?>"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeOutCubic" style=" color: <?=((isset($homeSlider->title_color) and $homeSlider->title_color!='') ? $homeSlider->title_color : '#22AFEB')?>; max-width: 730px; width: auto; white-space: normal; line-height: 1.15; font-size: <?=((isset($homeSlider->title_size) and $homeSlider->title_size!='') ? $homeSlider->title_size : '45')?>px!important; min-width: 550px;"><div class="col-xs-12 com-md-12 col-lg-12 text-slider1" ><?=($homeSlider->title ? $homeSlider->title : '' )?></div></div>
<?php
echo '</li>';
}
echo '</div>';
echo '</ul></div></div>';
}
?>
和脚本：
var tpj=jQuery;
var revapi4;
tpj(document).ready(function() {
if(tpj("#rev_slider_4_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_4_1");
}else{
revapi4 = tpj("#rev_slider_4_1").show().revolution({
sliderType:"standard",
jsFileLocation:"lib/revolution/js/",
sliderLayout:"fullwidth",
dottedOverlay:"none",
delay:16000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
bullets: {
enable: true,
container:"slider",
hide_onmobile: false,
style: "ares",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "bottom",
h_offset: 0,
v_offset: 30,
space: 3,
rtl:false,
tmp: ''
}
},
viewPort: {
enable:false,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1920,1366,1240,1024,778,480],
gridwidth:[1920,1366,1240,1024,778,480],
gridheight:[764,543,494,408,310,192],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
document.getElementById('vid').addEventListener('ended',myHandler,false);
function myHandler(e) {
revapi5 = tpj("#rev_slider_4_1").revshowslide(2).revolution({
sliderType:"standard",
jsFileLocation:"lib/revolution/js/",
sliderLayout:"fullwidth",
dottedOverlay:"none",
delay:16000,
});
}
}
}); /*ready*/