I have the following example of BXSlider, where I have 4 slides each having a Youtube video. The problem is that when I play a video and go to the next slide, it keeps on playing:
http://jsfiddle.net/isherwood/XWL9Y/
$(document).ready(function () {
$('.bxslider').bxSlider();
});
Can someone help out to make the youtube video pause when going to the next slide?
var slider = $("#gallery").bxSlider({
adaptiveHeight:true,
auto:true,
autoStart:true,
autoControls:true,
video:true,
onSlideAfter: function(slide){
if (slide.find("iframe:first").length) {
slider.stopAuto();
}
}
});
You might also be able to use something like slide.find("div.fluid-width-video-wrapper:first") if you use iframes for other things in the in the slider.
Source
----Update----
var slider = $('.bxslider').bxSlider({
onSlideAfter: function(slide, oldindex, currentSlide){
oldSlide = $( '.bxslider > li:nth-child(' + (oldindex+1) + ')');
youtubeVideo = oldSlide.find('iframe[src*=youtube]');
if ( youtubeVideo.length ) {
youtubeVideo.get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
}
}
});
Source
----Edit----
Also make sure to add ?enablejsapi=true to the the iframe src, otherwise the above JavaScript will not work (source).
After long search i found the solution. Try this:
onSlideAfter: function(){
jQuery("iframe").each(function() {
var src= jQuery(this).attr('src');
jQuery(this).attr('src',src);
});
}
This will stop all videos. It is basically resetting the video urls.
Related
I am injecting a video element into a div on click.
However, I can't get any events to run on that video there after.
Specifically, I want a pause button and for it to fade out when ended.
I can get it to work if I just put in in the html normally - so it must be that it doesn't know it's there when injected?
$('#play-video').on( 'click', function() {
$(this).fadeOut();
$("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");
$('#close-video').fadeIn();
});
$('#close-video').on('click', function() {
$('#full-video').pause();
});
$('#full-video').bind('ended', function(){
alert('video is over');
});
In a codepen: HERE
Any experience with this? Thanks.
You cannot execute video element methods on the $-wrapped element.
var $video = $('#some-video');
//**NOT OK**
$video.play();
//**OK** - executing the method on the base html video element
var video = $video[0];
video.play();
Here is a working example
try this.
$('#play-video').on( 'click', function() {
$("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");
$(this).fadeOut('fast' , function() {
$("#full-video")[0].play();
$('#close-video').fadeIn();
});
});
$('#close-video').on('click', function() { $('#full-video')[0].pause(); });
$('#full-video').bind('ended', function(){ alert('video is over'); });
I want to hide iframe and show image thumbnail when iframe video
playback reaches the end. But none of the Vimeo player api event
working. Can anybody help me? Here is my code:
fiddle
$("#video .playBtnOrangeMid").click(function(){
$(this).hide();
$("#video1").attr("src","http://player.vimeo.com/video/69185765?color=de641b&autoplay=1&api=1&player_id=video1");
$("#video").css("background","none");
var iframe = $('#video1')[0],
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', function(){
$("#video .playBtnOrangeMid").show();
$("#video1").attr("src","");
$("#video").css("background","url(../images/thumb1.png)");
});
});
});
I have 4 Jquery tabs, In each tab there is 2 videos. how I make one video play at the time and pause all others? and How make the video pause when I switch to new Tab?
this is the code Jsfiddle
/* play one video at a time */
$('video').bind('play', function() {
activated = this;
$('video').each(function() {
if(this != activated) {
this.pause();
}
});
});
/* get the active tab */
var active = $( "#issuestabs" ).tabs( "option", "active" );
/* pause all videos that are not in the active tab*/
if (!active) {
$("video").each(function(){
$(this).get(0).pause();
});
}
can anyone show me what is wrong?
thanks!
can you use:
$('.tab').on('click', function() {
$('.tabcontent:hidden').find('video').each(function() {
$(this).get(0).pause();
});
});
(where .tabcontent is the name of your content panels that are hidden/shown, the click function i showed is just an example since I do not know which library you are using for tabs.)
The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.
I would like the carousel to only slide within the list and not infinitely loop.
Any help would be appreciated.
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function() {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function() {
that.$element.trigger('slid')
}, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.
For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:
$('.carousel').carousel({
interval: 5000,
wrap: false
});
Setting the wrap option to false tells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.
You could just add some code to the page to hide the appropriate carousel controls after a slid event:
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
This example assumes the markup used on the Twitter Bootstrap example carousel.
Make sure to hide the left one when you open the page.
Add attribute data-wrap="false" in Div
The easiest way to do this is as follows:
//intro slider
$('#carousel_fade_intro').carousel({
interval: 2500,
pause: "false"
})
//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
cnt--;
if (cnt == 1) {
$('#carousel_fade_intro').carousel('pause');
}
});
Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.
source: http://getbootstrap.com/javascript/#carousel-options
For people looking for a solution for Bootstrap 3 working for multiple carousels on same page try this:
$(function() {
// init carousel
$('.carousel').carousel({
pause: true, // init without autoplay (optional)
interval: false, // do not autoplay after sliding (optional)
wrap:false // do not loop
});
// init carousels with hidden left control:
$('.carousel').children('.left.carousel-control').hide();
});
// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
// This variable contains all kinds of data and methods related to the carousel
var carouselData = $(this).data('bs.carousel');
// get current index of active element
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
// hide carousel controls at begin and end of slides
$(this).children('.carousel-control').show();
if(currentIndex == 0){
$(this).children('.left.carousel-control').fadeOut();
}else if(currentIndex+1 == carouselData.$items.length){
$(this).children('.right.carousel-control').fadeOut();
}
});
Please let me now if this is not working in your case.
if you are using bootstrap 3 use this
$('.carousel').carousel({
wrap: false
});
The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3 the event has changed name.
The below code is an updated version of this code. And here you can find a more detailed explanation
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);
I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?
Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!