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'); });
Related
Im trying to fade in on a video once it starts, fade out once it has ended and restart after, but I cant seem to get the right result.
Here is what I have to far:
var video = $('.central-video-wrapper video');
video.on('ended', function() {
video.fadeOut('slow');
video.load( function(){
video.fadeIn('slow');
});
});
You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle
You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});
I´m working on a Lightbox, where user can watch videos.
The Problem if i would close it by clicking outside of the container i will get the error "Cannot read property 'stopVideo' of undefined" but if i close it with the button, it works well.
$(function(){
var appendthis = ("look over jsfiddle");
$('a[data-modal-id]').click(function(e) {
$(window).resize();
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
var modalBox = $(this).attr('data-modal-id');
$('#'+modalBox).fadeIn($(this).data());
$(".js-modal-close-vid, .modal-overlay").click(function() {
var player = $(this).closest('.modal-box').data('player');
player.stopVideo();
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
});
JsFiddle in the comment.
$(".js-modal-close, .modal-overlay").click(function() {
var player = $('.modal-box').data('player');
player.stopVideo();
player.seekTo(0);
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
The change was changing $(this).closest('.modal-box').data('player'); to $('.modal-box').data('player') and it works. I think the problem here was incorrect use of the closest method and the selector not being what you expected.
http://jsfiddle.net/4f5dksj5/6/
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.
I'm practically useless at JavaScript so I need your help to add a "pause on mouse hover" feature to this slideshow.
$( function() {
$( '#cbp-fwslider' ).cbpFWSlider();
} );
setInterval(function() {
if(jQuery('.cbp-fwnext').css('display') != 'none'){
jQuery('.cbp-fwnext').click();
}
else {
jQuery('.cbp-fwdots span:first-child').click();
}
}, 3000);
I found this slideshow here and I added the bottom bit (copied it from another user) to allow it to auto scroll but I have no idea on how to make it pause on mouse hover.
Please help anyone.
If I understand your code correctly, you are using setInterval() to simulate a click on the next button every 3 seconds. So you can add a pause by having some code process the mouseenter and mouseleave events and set a isPaused variable that your existing code would then test before doing the click(). Assuming you want the hover functionality to be over the #cbp-fwslider element:
$( function() {
var isPaused = false;
$( '#cbp-fwslider' ).cbpFWSlider()
.on({
mouseenter: function() { isPaused = true; },
mouseleave: function() { isPaused = false; }
});
setInterval(function() {
if (isPaused) return; // do nothing when paused
if(jQuery('.cbp-fwnext').css('display') != 'none')
jQuery('.cbp-fwnext').click();
else
jQuery('.cbp-fwdots span:first-child').click();
}, 3000);
});
Note that I've moved your setInterval() code inside the document ready handler so that isPaused can be a local variable within the ready handler rather than a global.
(Simple demo of the pause-on-hover functionality without the slideshow: http://jsfiddle.net/1gf8z8yd/1/)
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)");
});
});
});