jssor滑块添加视频
问题描述:
我想在我的当前图像滑块内添加一个视频。我不想只播放视频,而是混合使用视频和图像。我已经能够播放视频,但我需要添加暂停,播放和停止控制器,并使该幻灯片比其他幻灯片更长。谁能帮帮我吗?jssor滑块添加视频
http://www.piratesdinneradventureca.com/
<!-- Insert Slideshow -->
<div id="slideshowwrapper">
<div id="slider1_container" style="left: 0px; top: 5px; width: 687px; height: 324px; overflow: visible; position: relative;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 687px; height: 324px; overflow: hidden;">
<div><a u="image" href="http://www.piratesdinneradventureca.com/special-offers/"><img src="<?php echo get_template_directory_uri(); ?>/images/Halloween-show.png" /></a></div>
<div><a u="image" href="http://www.piratesdinneradventureca.com/special-offers/"><img src="<?php echo get_template_directory_uri(); ?>/images/After-Summer.png" /></a></div>
<div><video style="width="687px" height="324px" autoplay>
<source src="<?php echo get_template_directory_uri(); ?>/images/PiratesSeaDragon_converted.mp4" type="video/mp4" />
<source src="<?php echo get_template_directory_uri(); ?>/images/PiratesSeaDragon.ogv" type="video/ogg" pHideControls="0" />
</video></div>
答
Jssor滑块支持YouTube视频。
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../js/jssor.player.ytiframe.min.js"></script>
你可以把一个视频播放器中的任何幻灯片的格式如下,
<div u="player" style="position: relative; top: 0px; left: 0px; width: 640px; height: 390px; overflow: hidden;">
<!-- iframe in ebay page is not allowed, youtube iframe video is not supported for ebay listing -->
<iframe pHandler="ytiframe" pHideControls="0" width="640" height="390" style="z-index: 0;" url="http://www.youtube.com/embed/H7jtC8vjXw8?enablejsapi=1&version=3&playerapiid=ytplayer&fs=1&wmode=transparent" frameborder="0" scrolling="no"></iframe>
<!-- play cover begin (optional, can remove play cover) -->
<div u="cover" class="videoCover" style="position: absolute; top: 0px; left: 0px; background-color: #000; background-image: url(../img/play.png); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=40); opacity: .4; cursor: pointer; display: none; z-index: 1;"></div>
<!-- play cover end -->
<!-- close button begin (optional, can remove close button) -->
<style>
.closeButton { background-image: url(../img/close.png); }
.closeButton:hover { background-position: -30px 0px; }
</style>
<div u="close" class="closeButton" style="position: absolute; top: 0px; right: 1px;
width: 30px; height: 30px; background-color: #000; cursor: pointer; display: none; z-index: 2;">
</div>
<!-- close button end -->
</div>
答
,并添加
//fetch and initialize youtube players
$JssorPlayer$.$FetchPlayers(document.body);
请解释为什么这会工作。 – 2015-10-17 06:59:14
@RohitGupta说了些什么。此答案已被标记,并显示在低质量帖子审核队列中,因此缺少任何解释,存在被删除和丢失的风险。 – sideshowbarker 2015-10-18 04:35:18