使用滑杆时如何停止视频播放? [英] how to stop video playing when using slider?
问题描述
上面我有一个应用程序，其中包含一个滑块中的视频.滑块中有2个视频.请播放第一个视频，然后在不停止视频的情况下，单击滑块中的下一个"以滑至下一个视频并播放该视频.您可以判断两个视频都在同时播放.
Above I have an application which contains videos in a slider. There are 2 videos in the slider. Please pla the first video and then without stopping the video, click on "Next" in the slider to slide to the next video and play that video. You can tell that both videos are playing at the same time.
我的问题是，滑动视频后是否可以停止播放视频?
My question is that is it possible to stop a video playing when it has been slided?
我正在使用jwplayer播放视频，而使用基本的jquery滑块作为滑块.
I am using jwplayer for playing video and basic jquery slider for slider.
代码如下:
<div id="banner-video_<?php echo $key; ?>">
<ul class="bjqs">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<li><div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
<?php $i++; ?>
</script>
</div>
</li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-video_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 300,
width : 700,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>
<?php
}
//end:procedure video
?>
推荐答案
您应该添加命令以在bjqs的源代码中暂停，尝试使用未缩小的版本，这样将更易于修改，并且对它感到满意时您可以再次将其缩小. 所以在422行的bjqs中，您会找到
you should add the command to pause in the source of the bjqs, try using the not minified version it will be easier to modify and when you are happy with it you can minify it again. so in bjqs on line 422 you will find
$c_wrapper.on('click','a',function(e){
e.preventDefault();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
添加命令以在单击链接时暂停所有玩家(使用示例中的代码):
add the command to pause all players when a link is clicked like this (using code from your example) :
$c_wrapper.on('click','a',function(e){
e.preventDefault();
jwplayer("myElement-70-0").pause();
jwplayer("myElement-70-1").pause();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
如果要使其动态，可以遍历滑块的元素.只要使用命名视频元素的规则，类似这样的东西
if you want to make it dynamic you can loop through the elements of the slider..as long as you use a rule for naming the video elements, something like this
$('li.bjqs-slide').each( function(index) {
jwplayer("myElement-70-"+index).pause();
});
如果您要制作不包含视频的幻灯片，只需在jwplayer元素中添加一个类并对其使用每个元素，那么假设您所有的jwplayer元素都具有.playjw类，您可以做类似的事情
if you want to have slides that don't contain videos, just add a class to the jwplayer element and use each to that, so let's say all your jwplayer elements have the class .playjw, you would do something like
$('.playjw').each( function(index) {
jwplayer("myElement-70-"+index).pause();
});
希望有帮助！
这篇关于使用滑杆时如何停止视频播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
