Jquery 第2周期HTML5视频插件播放/播放仅适用于奇数而非偶数
所以我正在为Cycle2幻灯片插件制作一个HTML5视频插件 工作原理: 第一张幻灯片视频自动播放,如果视频完成,它将自动转到下一张幻灯片。 如果下一张幻灯片是视频,它会自动播放该幻灯片。 如果在幻灯片之间切换,则会暂停上一张视频幻灯片并播放新幻灯片。 在视频幻灯片上禁用超时,以便播放整个视频 什么不起作用: 单击Jquery 第2周期HTML5视频插件播放/播放仅适用于奇数而非偶数,jquery,html,video,jquery-cycle2,cycle2,Jquery,Html,Video,Jquery Cycle2,Cycle2,所以我正在为Cycle2幻灯片插件制作一个HTML5视频插件 工作原理: 第一张幻灯片视频自动播放,如果视频完成,它将自动转到下一张幻灯片。 如果下一张幻灯片是视频,它会自动播放该幻灯片。 如果在幻灯片之间切换,则会暂停上一张视频幻灯片并播放新幻灯片。 在视频幻灯片上禁用超时,以便播放整个视频 什么不起作用: 单击时播放/Pauze视频元素。循环幻灯片放映。这是部分工作!发生的情况是,当你第一次看到幻灯片时,p/p工作得非常完美,但第二次看到幻灯片时,它就不工作了。第三次了。第四次没有 因此,在
时播放/Pauze视频元素。循环幻灯片放映
。这是部分工作!发生的情况是,当你第一次看到幻灯片时,p/p工作得非常完美,但第二次看到幻灯片时,它就不工作了。第三次了。第四次没有
因此,在奇数
情况下有效,而在偶数
情况下无效
代码
/*! html5video plugin for Cycle2; version: 00000001 */
(function($) {
$(document).ready(function() {
// We add a class for targetting
$('.lsss-video').parent().addClass('cycle-slide-html5video');
// We assign a id to this class
$('.cycle-slide-html5video').attr('id', 'lsss-video');
// Autoplay the video in the first slide on page load and after each transition
$( '.cycle-slideshow' ).on( 'cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) {
// Before we give the command we need to check if the slide contains a video element
if ($(currentSlideEl).is('#lsss-video')) {
// Video element is present so we continue with playing the video
$('video', currentSlideEl)[0].play();
// Now we want to assign a class 'playing' to this video element only so we can play/pause it
$('video', currentSlideEl)[0].addClass('playing');
// We want to click on the slideshow to make it play/pause
$(".cycle-slideshow").click(function() {
console.log('clicked');
// Now we check if the 'playing' class is present if it is we continue with play/pause
if ($('video', currentSlideEl)[0].hasClass('playing')) {
// Playing class is present so we continue with a click function
console.log('The playing class is found!');
// Now we pause the video and remove the `playing` class and add the `paused` class
$('video', currentSlideEl)[0].pause();
$('video', currentSlideEl)[0].removeClass('playing');
$('video', currentSlideEl)[0].addClass('paused');
// As the `playing` class was not present we continue to see if it was already `paused`
} else if ($('video', currentSlideEl)[0].hasClass('paused')) {
// Pause class is present so we continue with a click function
console.log('The paused class is found!');
// Now we play the video and remove the `paused` class and add the `playing` class
$('video', currentSlideEl)[0].play();
$('video', currentSlideEl)[0].removeClass('paused');
$('video', currentSlideEl)[0].addClass('playing');
}
});
}
});
// We pauze the previous video when the user advances to a new slide
$( '.cycle-slideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
// Before we give the command we need to check if the slide contains a video element
if ($(outgoingSlideEl).is('#lsss-video')) {
// Video element is present so we continue with pauzing the video
$('video', outgoingSlideEl)[0].pause();
// We remove any left behind classes from the previous element
$('video', outgoingSlideEl)[0].removeClass('paused');
$('video', outgoingSlideEl)[0].removeClass('playing');
}
});
// When the video is playing we don't want the timeout to interrupt it so on the video elements we override the timeout
$('#lsss-video').attr('data-cycle-timeout', '0');
// When the video is done playing we want it to automatically advance the slide to the next one
$('video').on('ended',function(){
//console.log('Video has ended!');
$(this).closest('.cycle-slideshow').cycle('next'); // trigger next slide
});
});// Document Ready
})(jQuery);
您可以在此小提琴中找到完整的工作示例:
祝你今天愉快;) 使用一个复制您的issue@A.Wolff谢谢你的提示,我会尽快做一把小提琴。小提琴现在被添加了。需要解决一些问题,因为一些元素,如pauze/演奏根本不起作用?真奇怪小提琴不起作用我尝试了代码笔同样的问题它不起作用,但在网站上它工作吗???我认为这与物品的装载方式有关。很抱歉,没有可用的小提琴或其他编解码器。因此,我将从问题中删除这一部分。正如我之前在另一个问答中所说的那样,昆汀·罗杰是拥有正确代码的人。他一次又一次地提供帮助并提供有效的解决方案。非常感谢你,它帮我节省了几个小时的工作,教会了我一两件事。再次感谢你。
/*! html5video plugin for Cycle2; version: 00000001 */
(function($) {
$(document).ready(function() {
// We start with targetting the entire slideshow element
$('.cycle-slideshow').each(function(i) {
$(this).addClass('cycle-slideshow-randomid--' + i);
}); // Cycle Slideshow Each Function
// We add a class for targetting the video slides
$('.lsss-video').parent().addClass('cycle-slide-html5video');
// We assign a id to this class
$('.cycle-slide-html5video').attr('id', 'lsss-video');
// Autoplay the video in the first slide on page load and after each transition
$('.cycle-slideshow').on('cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) {
// Before we give the command we need to check if the slide contains a video element
if ($(currentSlideEl).is('#lsss-video')) {
// Video element is present so we continue with playing the video
$('video', currentSlideEl)[0].play();
}
// Leaves us with checking if the video should be playing or is paused
// When paused
$('.cycle-slideshow').on('cycle-paused', function(event, optionHash) {
// We check if the currentslide is a video slide
if ($(currentSlideEl).is('#lsss-video') && $(this).attr("class")==$(currentSlideEl).parent().attr("class")) {
// Then we set the video on pause
$('video', currentSlideEl)[0].pause();
}
});
// When playing
$('.cycle-slideshow').on('cycle-resumed', function(event, optionHash) {
// We check if the currentslide is a video slide
if ($(currentSlideEl).is('#lsss-video') && $(this).attr("class")==$(currentSlideEl).parent().attr("class")) {
// Then we set the video on playing
$('video', currentSlideEl)[0].play();
}
});
});
// We pauze the previous video when the user advances to a new slide
$('.cycle-slideshow').on('cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
// Before we give the command we need to check if the slide contains a video element
if ($(outgoingSlideEl).is('#lsss-video')) {
// Video element is present so we continue with pauzing the video
$('video', outgoingSlideEl)[0].pause();
}
// Leaves us with checking if the video should be playing or is paused
// When paused
$('.cycle-slideshow').on('cycle-paused', function(event, optionHash) {
// We check if the currentslide is a video slide
if ($(outgoingSlideEl).is('#lsss-video') && $(this).attr("class")==$(outgoingSlideEl).parent().attr("class")) {
// Then we set the video on pause
$('video', outgoingSlideEl)[0].pause();
}
});
// When playing
$('.cycle-slideshow').on('cycle-resumed', function(event, optionHash) {
// We check if the currentslide is a video slide
if ($(outgoingSlideEl).is('#lsss-video') && $(this).attr("class")==$(outgoingSlideEl).parent().attr("class")) {
// Then we set the video also on pause
// We do this so that no matter what the previous video is always paused
// On next view of that slide the `cycle-update-view` will take care of autoplaying
$('video', outgoingSlideEl)[0].pause();
}
});
});
// When the video is playing we don't want the timeout to interrupt it so on the video elements we override the timeout
$('#lsss-video').attr('data-cycle-timeout', '0');
// When the video is done playing we want it to automatically advance the slide to the next one
$('video').on('ended', function() {
//console.log('Video has ended!');
$(this).closest('.cycle-slideshow').cycle('next'); // trigger next slide
});
}); // Document Ready
})(jQuery);