ended event videojs not working - javascript

I would like to trigger a simple event when my video is finished. I've placed this directly bellow my video tag.
<script type="text/javascript">
var myPlayer = videojs("session_video");
videojs("session_video").ready(function(){
this.addEvent("ended", function(){
alert('Here I am');
});
});
</script>
However I get: TypeError: this.addEvent is not a function and I can't find why.
You can see it live here: 78.47.121.50 (stackoverflow won't allow to make that a link)
enter code 01-01-01-2012 to bring up the video.
Any insight is much apricaited!
Kind regards,
Jason.

"addEvent" and "removeEvent" were replaced by "on" and "off"
try:
this.on("ended", function(){

For those who still have problems with ended events in some browsers you can resort to this fix:
player.ready(function() {
var myPlayer = this;
playerInstance.on("timeupdate", function(event) { //chrome fix
if (event.currentTarget.currentTime == event.currentTarget.duration) {
console.log('video ended');
}
});
});

The ended event will not fire if end user intentionally seek the video to end keeping video as paused. I was able to get it work as:
<script type="text/javascript">
var player = videojs('my_video', {}, function() {});
player.ready(function(){
var duration_time = Math.floor(this.duration());
this.on('timeupdate', function() {
var current_time = Math.floor(this.currentTime());
if ( current_time > 0 && ( current_time == duration_time ) ){
$('#continue_button').removeAttr("disabled");
}
});
});
</script>

2020 Updated answer:
let player = videojs('video-player-id');
player.on('ended', function() {
this.dispose();
});
I think it's good to call dispose More on why over here

On Stackoverflow i find one part of solution the otherpart find it from Lyn Headley top answer.
<script type="text/javascript">
//rename subtitle button
videojs.addLanguage('de', {
"captions off": "Untertitel aus",
});
videojs(document.querySelector('video') /* or selector string */, {
techOrder: ['html5', 'flash'],
controls: true,
autoplay: false,
preload: 'false',
language: 'de',
flash: {
swf: 'video-js.swf'
}
}, function(){
// Player (this) is initialized and ready.
this.on('ended', function(){
alert('ended');
});
this.on('firstplay', function(){
alert('firstplay');
});
});
</script>
this will alert you on the end of video.
place it under the code of your video
and it should works.

Related

Unslider on Image Hover

I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});
Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});

How can capture Click event if element is iframe?

I have appended a iframe with youtube embed url in a div which id is div1. I want to do something when click happened on iframe.
i am using this jquery code but it is not working.
$('#div1 iframe').bind('click', function(){
alert('clicked on iframe');
});
I'm not sure whether you have id for iframe or not. but you can try to catch the click even of the document in the iframe:
document.getElementById("iframe_id").contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
Though this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:
$('#iframe_id').bind('click', function(event) { });
function iframeclick() {
document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
document.getElementById("theiframe").contentWindow.location.reload();
}
}
This we can use achive with jquery and its is also possible with javascript
$('.inner iframe').bind('click', function(){
alert('clicked on iframe');
});
Here is a solution that is vanilla JS - and resolved a similar issue for me where I needed to close some dropdowns on the parent if the iFrame was clicked
public static iFrameClickHandler = {
iFrame: undefined,
mouseOverIframe: false,
mouseOver: function() {
this.mouseOverIframe = true;
},
mouseLeave: function() {
this.mouseOverIframe = false;
window.focus();
},
windowBlur: function() {
if (this.mouseOverIframe) this.fireClickEvent();
},
fireClickEvent: function() {
// do what you wanna do here
},
init: function() {
this.mouseOver = this.mouseOver.bind(this);
this.mouseLeave = this.mouseLeave.bind(this);
this.windowBlur = this.windowBlur.bind(this);
this.iFrame = document.querySelector('class/id of your iframe wrapper');
this.iFrame.addEventListener('mouseover', this.mouseOver);
this.iFrame.addEventListener('mouseleave', this.mouseLeave);
window.addEventListener('blur', this.windowBlur);
window.focus();
},
destroy: function() {
this.iFrame.removeEventListener('mouseover', this.mouseOver);
this.iFrame.removeEventListener('mouseleave', this.mouseLeave);
window.removeEventListener('blur', this.windowBlur);
}
}

Click event in function

edit
my code is now at the end of the document and it works. thx for help.
question
I want to call a click function...but when i click on my link the site reloads.
Here is my code:
(function(window, undefined) {
var gn = (function(){
var sitelength = $(window).width(),
$next = $('.next'),
$start = $('.start'),
init = function(){
_scrollto();
_checkmenu();
},
_scrollto = function(){
$next.on( 'click', function( event ) {
$('html,body').animate({scrollLeft: $("body").offset().left+200},1500);
return false;
});
$start.on( 'click', function( event ) {
$('html,body').animate({scrollLeft: $("body").offset().left+0},1500);
return false;
});
},
_checkmenu = function(){
$(window).scroll(function(e){
if($(this).scrollLeft()>100 && (!$('#side').hasClass('ac'))){
$('#side').addClass('ac');
$('#side').animate({ left : -230 }, 'slow');
$('#sitenav').animate({ left : 0 }, 'slow');
}
if($(this).scrollLeft()<100 && $('#side').hasClass('ac')){
$('#side').removeClass('ac');
$('#side').animate({ left : 20 }, 'slow');
$('#sitenav').animate({ left : -50 }, 'slow');
}
});
}
return { init : init };
})();
gn.init();
})(window);
but when i exclude the whole click thing in a "$(document).ready(function())" it works fine.
$(document).ready(function(){
var $next = $('.next'),
$start = $('.start');
$next.on( 'click', function( event ) {
$('html,body').animate({scrollLeft: $("body").offset().left+200},1500);
return false;
});
$start.on( 'click', function( event ) {
$('html,body').animate({scrollLeft: $("body").offset().left+0},1500);
return false;
});
});
can someone tell me why and how to fix it?
The $.ready() function doesn't execute until the DOM is 'ready', meaning the browser has had time to download and parse the rest of your page.
Assuming your code is in the <head> tag, in your first example the code will be executed as soon as the browser encounters it. The browser tries to bind the click event to $('.next'), but the element hasn't been created yet, so the event never gets bound.
Wrapping code like this is $.ready() is very good practice, so your second example is a much better solution.
When you do not wrap your code in $(function () {...});, the DOM is not yet fully loaded, when your code is executed and therefore $('.next') and $('.start') actually apply to no elements.
This happens because today's JS engines are so fast and optimized that they could execute your whole script, before the browser has fully loaded the page.

clearTimeout only works at end of loop

I am having problems with the clearTimeout JavaScript Function. I would like the homeAnimation()function to stop looping as soon as the mouse hovers over one of the infoboxes (just working over one box would be a start)
I have stripped out the code I think is unneccessary. Any help would be greatly appreciated, thanks!
This is the JavaScript/JQuery:
$(document).ready(function() {
var x;
function homeAnimation() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
});
$('#infoframe1').fadeIn(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/women3.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe2').show(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/men4.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe3').show(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/access1.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe4').show(0).delay(5000).hide(0);
x = setTimeout(homeAnimation, 5000);
});
});
});
}
This is the clearTimeout() call at present:
$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
clearTimeout(x);
});
And the HTML:
<div id='infobox1'>
<span id='heading'>Special Offers</span><br /><br /><a>Check out or Special Offers of the week, including 2 for 1 on all Bob Smith products</a>
</div>
<div id='infobox2'><span id='heading'>Women</span></div>
<div id='infobox3'><span id='heading'>Men</span></div>
<div id='infobox4'><span id='heading'>Accessories</span></div>
<div id='infoframe1'>
<span id='heading'>Special Offers</span><br /><br />
</div>
<div id='infoframe2'><span id='heading'>Women</span></div>
<div id='infoframe3'><span id='heading'>Men</span></div>
<div id='infoframe4'><span id='heading'>Accessories</span></div>
I would recommend something like this. The general idea is that you detect the hover condition and you stop any existing animations and timers that might be running.
Then, when you stop hovering, you start it up again. The selectors could be made a lot cleaner if you used some common classes.
$(document).ready(function(){
var x = null;
$("#infobox1, #infobox2, #infobox3, #infobox4").hover(function() {
$("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true); // stop current animation
clearTimeout(x);
}, function() {
$("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true); // stop current animation
clearTimeout(x);
homeAnimation(); // start it again
});
function homeAnimation()
x = null;
// I didn't change the code after here
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
});
$('#infoframe1').fadeIn(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/women3.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe2').show(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/men4.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe3').show(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/access1.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe4').show(0).delay(5000).hide(0);
x = setTimeout(homeAnimation, 5000);
});
});
}
});
I made a jsfiddle to find out what you are basically trying to achive. I got it working, but I must say that your main loop is somewhat entangled. http://jsfiddle.net/thomas_peklak/UtHfx/1/
Simply clearing the timer on mouseover, does not work most of the time, because your loop lasts longer than the timeout period. Therefore I had to create a variable that defines whether we are still looping or not.
Add this code to the top of your javascript
window.onerror = function(e) { e = "There is no " + e.split(" ")[0]; alert(e)}; window.* = spoon();
try to call clearTimeout();

jCarousel, Counter, how?

Im using this plugin: http://sorgalla.com/projects/jcarousel/
I want there do be a counter that can display:
1 of 4
When clicking the next button, it should say:
2 of 4 and so on...
The script is the default initialization:
<script type="text/javascript">
jQuery('#mycarousel').jcarousel();
</script>
However, haven't seen an example of this in the documentation ? So any help would be appreciated...
Thx
Uses something like this:
$(document).ready(function () {
var nmrElements = $('#mycarousel').children('li').length;
$('#mycarousel').jcarousel({
scroll: 1,
itemLoadCallback: function (instance, controlElement) {
if (instance.first != undefined) {
$('#label').html(instance.first + ' of ' + nmrElements);
}
}
});
});
Should be kind of impossible to realize with what is given there. Since it's just a ul that is hidden behind a div and only that ul element gets scrolled when you click on a button.
There is no semantic property that you could use to identify the currently visible object.
jQuery(document).ready(
function() {
function mycarousel_initCallback(carousel) {
// alert(this.mycarousel);
// alert("inside carousel");
// Disable autoscrolling if
// the user clicks the prev
// or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if
// the user moves with the
// cursor over the clip.
carousel.clip.hover(
function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
}
jQuery('#mycarousel').jcarousel({
auto : 2,
scroll : 1,
wrap : 'last',
initCallback : mycarousel_initCallback,
itemFallbackDimension: 300,
//size: mycarousel_itemList.length,
itemFirstInCallback:mycarousel_itemFirstInCallback
// itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
$(".jcarousel-prev").after("<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");
function display(s) {
$('#myHeader').html(s);
};
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
display( idx +"<i> of </i>"+ $("#mycarousel li").length);
};
You can assign id-s to each image in carousel. And add some javascript to write the number from id of that images.
And also:
<script type="text/javascript">
function Callback_function(elem) {
document.write(this.id);
}
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: Callback_function,
});
</script>
it is simple, just open the following file:
sites\all\modules\jcarousel\js\jcarousel.js
and in line 146:
carousel.pageCount = Math.ceil(itemCount / carousel.pageSize);
change it to this: carousel.pageCount = Math.ceil(itemCount / 1);
it will work superb :D

Categories

Resources