使用 Video.js 暂停 jQuery 循环 [英] Pause jQuery Cycle with Video.js
问题描述
我有一个 jquery 循环滑块,当播放视频或到达显示视频的幻灯片时,我需要暂停 .(这些选项中的任何一个都可以,但我不知道如何暂停具有特定类或 ID 的幻灯片.)我正在使用 video.js 显示视频.
I have a jquery cycle slider that I need to pause either when a video is played or when a slide is reached that displays a video. (Either of those options is fine, but I could not figure out how to pause a slide with a certain class or id.) I am using video.js to display videos.
发生的情况是,当我按下播放时,视频开始播放,但当我将鼠标从视频上移开时,它会自动转到下一张幻灯片.如果我点击寻呼机缩略图,它会保持暂停状态,但如果幻灯片正常进行并且我按下播放键,它会遵循循环超时"设置的规则.
What is happening is when I press play the video starts playing, but when I move the mouse off the video it automatically goes to the next slide. If I click on the pager thumbnail it stays paused, but if the slideshow progresses normally and I press play, it follows the rules set by the cycle 'timeout.'
我正在寻找一种在播放视频时暂停幻灯片的方法 - 通过在视频开始播放时调用事件,或者在播放视频幻灯片时完全暂停幻灯片.
What I am looking for is a way to pause the slideshow when the video is played - either by calling an event when the video starts playing, or by pausing the slideshow entirely when a video slide is reached.
我有这个想法:
<script>
jQuery(document).ready(function($) {
$(".project_slides").cycle({
fx:'fade',
timeout: 5000,
prev : '#prev',
next : '#next',
pager : '#pager',
pause: 1,
pagerAnchorBuilder: function(idx, slide) {
return '#pager li:eq(' + (idx) + ') a';
}
});
$('#pager a').click(function() {
$('.project_slides').cycle('pause');
});
function pauseitall() {
$('.project_slides').cycle('pause');
}
});
</script>
在体内:
<div class="project_slides">
<div class="slide">
<img src="/media/{{ Slide.media }}" alt="{{ Slide.caption }}" />
</div>
<div class="slide">
<video id="video_11"
class="video-js vjs-default-skin"
controls width="512"
height="406"
poster="/media/images/video-poster.png"
preload="auto" loop>
<source type="video/mp4" src="/media/{{ Slide.media }}">
</video>
<script>
$(function() {
_V_("video_11").ready(function() {
var myPlayer = this;
addEvent(myPlayer.video, "play", function () {
pauseitall()}, false);
myPlayer.play();
});
});
</script>
</div>
</div>
显然,pauseitall() 函数没有被正确调用,但我一直在为此苦苦挣扎(在如此多的迭代中),以至于我最终只想在这里发布它,看看是否有人知道解决方案.
Obviously the pauseitall() function is not being called properly, but I've been struggling with this for so long (in so many iterations) that I finally just wanted to post it here and see if anyone knows a solution.
供参考,使用jQuery 1.7.2,jquery cycle 2.9999.5,和Video.js 3.2.0
For reference, using jQuery 1.7.2, jquery cycle 2.9999.5, and Video.js 3.2.0
推荐答案
试试这个:
myPlayer.addEvent("play", pauseitall);
这是文档指定如何绑定到事件的方式
this is how the docs specify how to bind to events
这篇关于使用 Video.js 暂停 jQuery 循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!