多个Vimeo视频与FlexSlider JS
Multiple Vimeo videos with FlexSlider JS
我希望有人能帮忙。我已经搜索并寻找解决方案,并且我玩过Javascript,但它超出了我的范围。我希望其他人能理解这一点。
FlexSlider 作为轮播做得很好,但如果你想要多个视频,我无法让它们停止 FlexSlider 动画,或者在用户触发下一张轮播幻灯片时自动停止播放。
用一个很容易做到。下面的Javascript显示了如何做到这一点。但如您所见,它依赖于具有 ID 的元素。问题是我的视频数量未知。有时可能有一个。有时可能有 20 个。
是否有任何方法可以修改下面的代码以使其可以处理任意数量的视频?
var player = document.getElementById('player_1');
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false)
} else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
var froogaloop = $f(player_id);
froogaloop.addEvent('play', function(data) {
$('.flexslider').flexslider("pause");
});
froogaloop.addEvent('pause', function(data) {
$('.flexslider').flexslider("play");
});
}
$(".flexslider").flexslider({
animation: "slide",
animationSpeed: Modernizr.touch ? 600 : 1000,
slideshowSpeed: 3500,
controlsContainer: "#carousel",
useCSS: false,
start: function(){
$(".flex-control-nav").css("margin-left", "-" + $(".flex-control-nav").width()/2 + "px");
},
before: function(slider){
$f(player).api('pause');
}
});
PHP/HTML 看起来像这样:
<div class="flexslider">
<ul class="slides">
<?php for($i=0;$i<$slideCount;$i++) { ?>
<li>
<?php if($slides[$i]["type"] == "1") { ?>
<div class="video">
<iframe id="player_1" width="1000" height="500" frameborder="0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen src="http://player.vimeo.com/video/<?php echo $slides[$i]["URL"]; ?>?api=1&player_id=player_1"></iframe>
</div>
<?php } else { ?>
<a href="explore.php?item=<?php echo $slides[$i]["slideID"]; ?>">
<img src="static/images/slides/<?php echo $slides[$i]["slideID"]; ?>/<?php echo $slides[$i]["URL"]; ?>" alt="<?php echo htmlspecialchars($slides[$i]["headline"], ENT_QUOTES, "UTF-8"); ?>" width="868" height="488" /></a>
<?php } ?>
< /li>
</ul>
</div>
可能的解决方案:运行 FOR 循环并计算视频的数量,然后在 Javascript 中创建许多不同的$f(player)
实例。有没有更好的方法?
我知道你说你已经继续前进了,但我很难让所有视频在继续下一张幻灯片时能够自动暂停,并且遇到了胡安弗拉·阿尔达索罗(http://juanfra.me/2012/08/flexslider-multiple-videos-v2/)的这段代码为每个视频创建必要的jQuery,然后我相信剩下的就是计算和命名iframe ID。 这是他的代码:
jQuery(window).load(function() {
var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false)
} else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
var froogaloop = $f(player_id);
froogaloop.addEvent('play', function(data) {
jQuery('.flexslider').flexslider("pause");
});
froogaloop.addEvent('pause', function(data) {
jQuery('.flexslider').flexslider("play");
});
}
jQuery(".flexslider")
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
before: function(slider){
if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
$f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
}
});
});
希望这有助于有人登陆这里:)
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 多个Vimeo视频与FlexSlider JS
- 在flexslider.js中将字符串替换为图像
- JS FlexSlider不能在Joomla 3中工作
- 如何更改属于jquery.flexslider-min.js文件的jquery-flexslider的高度
- FlexSlider:如何使用JS或jQuery在页面加载时获得图像高度