Example on how to use seek(time, [callback]) in Flowplayer - javascript

I'm trying to understand the flowplayer API, I'll be honest, I really need examples to get this stuff. I know some of you ninjas know what you're doing quite easily.
I am building a video training page for someone. It uses a PHP (kirbycms) framework to generate pages. I understand how to drop my variables and all that stuff. I have the videos working. It would be largely beneficial if I could have cue points that trigger things, and buttons that seek to specific time codes. It would be best if I can use PHP to define a string for these links.
I am looking for an example on how to use seek(time, [callback])
I am also looking for an example of
$(".player").bind("cuepoint", function(e, api, cuepoint) {
// here we use custom properties left, top and html
$("#info").html(cuepoint.html).animate({
left: cuepoint.left,
top: cuepoint.top
});
});
Update
Included bootply, this still does not work for me. Is it because my controls are outside of the flowplayer window?
http://bootply.com/86532

seek function (as documentation says: CLICK) is for jumping into given time on the timeline:
seek(time, [callback])
It takes two arguments: time in seconds and a callback - function that will be executed after jumping into that time on the timeline. Assuming that you are using jQuery you can write something like this to jump into 15.5s of the movie if you click button and then alert some message (just a simple example):
flowplayer(function (api, root) {
$("#someButton").on('click' function(e){
e.preventDefault();
api.seek(15.5, function(){
alert("you've jumped to 15.5s of the movie!");
});
});
});

Flowplayer doesn't do what you're after. In fact, seek() pretty much does the opposite- it triggers the video to jump to that point in time (and optionally calls back when its done).
If you want to set cuepoints and have the video trigger code when the video reaches those points in time, have a look at addEventListener("timeupdate", callback), see docs.
You might also want to check out popcornjs.

Related

Image slideshow at onload not working properly

I know this question has been asked before a lot but I checked most of those and didn't find solution to my problem so I'm asking here again.
So, question is:
I'm working on a cinema website project.
I added a few pictures as slide show in my home page but for some reason, slideshow is not working properly. It has some glitch in it like sometimes order is not correct and sometimes all pictures try to come up at one time or they change super fast etc.
I guessed maybe it's bcz somehow when I reload the website, the previous onlaod also keeps on working so it's like there are 2 slideshows going on or something like that, so from other solutions I guess I have to put onload=null somewhere maybe but I can't figure it out exactly.
Any help would be really appreciated.
This is my html code for slideshow:
<div class="bg-movies" style="top: 65%;">
<img src='images/slideshow/war.jpg' width='1000' height='300'
onload="setSlide();"/>
</div>
And this is my javascript code:
<script language='javascript'>
<!--
var toprated=new Array('sarkar.jpg','hajwala.jpg','96.jpg','war.jpg');
var pos=0,x;
document.images[1].src='images/slideshow/'+toprated[0];
function setSlide(){
x=setInterval('chgPic()',2000);
}
function chgPic(){
pos=(++pos)%toprated.length;
document.images[1].src="images/slideshow/"+toprated[pos];
}
-->
</script>
Your problem is recursion. You are calling the setSlide() method once your image is loaded. This will set up the interval to call the chgPic(), but when the chgPic() method is called and it updates the image src, the onload event on the img tag will be executed again (because an image has been loaded). Therefore setSlide() will be called again which will set up another interval to call the chgPic() method. And on and on etc. I'm surprised your browser hasn't crashed.
What you should do is set up the interval (i.e. call the setSlide() method) once the page has loaded, or even better yet, use jQuery's document ready if you're using jQuery:
$( document ).ready(function()
{
}
And call your setSlide() method in here.
Although, I wouldn't recommend doing it the way you are. You can use some simple jQuery and CSS to get this to work. Take a look at this link.

Override js-events

It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.
Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}

Add automation to a jQuery Content Slider

I'm looking for some help to implent a timer for this script I'm linking to.
As it is now, it toggles different slides when hovering the list to the right, but I want the slider to automatically jump ahead to the next slide after a certain amount of time until it reaches the end and then goes back to the top.
The catch though is that it also needs to work as it is now, so that you can toggle via hovering and when you stop hovering it should remember the position and jump ahead to the next item.
I realize this is alot to ask for, but some pointer would be great, thanks alot!
DEMO: http://jsbin.com/acorah
Your code is taking a bit of a performance hit with that each() loop which I don't think you need. You're binding events inside the loop and you're limiting your possibilities by declaring your actions inside the bind() scope. You want to be able to call events on any object and not only a single element; $('.cn_item') in your case.
The idea is to keep track of your current slide with a class, let's say .cur.
Then you create an object where you declare all your methods. The main methods or actions are getCur() and goTo() and mostly everything else will use these. ie. next() is just a shortcut for goTo()
var actions = {
getCur: function(){ return idx; },
goTo: function(idx){
// The simplest case
$slides.hide().eq(idx).show();
},
next: function(){ this.goTo(this.getCur()+1); },
prev: function(){ this.goTo(this.getCur()-1); }
.
.
.
}
Now you can call actions on events by simply doing this:
$slides.click(function(){ actions.goTo($(this).index()); });
$next.click(function(){ actions.next(); });
And then you can setInterval() to add a timer.
setInterval(actions.next, 1000);
This tutorial might help. I basically cover everything involved in making a slider. I would change some things as of today, we learn new ways to code stuff everyday.

Does anyone know any people-based source code audit website/forum/comunity for JavaScript/jQuery?

Hello I'm writing a jQuery code for my application and got some issues (like function called once, running three times).
I must know if exist any site that people audit source code and comment my mistakes..
most of my code is like this i/e:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
$.openModal = function(foo,bar){
//do something
$('a.close').click(function(){
$('#modal').hide();
});
$('input.text').click(function(){
$.anotherFunction();
});
});
does am I doing something obviously wrong?
I'm not aware of any source code audit like that -- certainly not for free! This website is pretty good for specific problems though...
In this case, the problem is that you are continually binding more and more events. For instance, with the following code:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
This code says "whenever the user clicks on an a.openbox element, show all .box elements and bind a new click handler to all .box a.openModal elements". This means that you will add another handler to .box a.openModal every time you click on a.openbox. I can't believe this is what you want to do!
It is difficult to work out what the correct code should be without knowing the context and exactly what you want to happen. My advice for you in the first instance would be to do some reading up on Javascript events and event handlers, particularly as they are implemented in jQuery.

this fadeIn / fadeOut jQuery code crashes my browsers- Why?

I created this code for a conference website that I had been tasked to do. It is a simple fade in and out loop using window.setInterval. I've tested it on firefox, safari and google Chrome. The first 2 just stop responding after awhile, while google chrome gives me a note saying that the script uses too much memory. Which part of my script is using too much memory and how should I rectify it ?
As the conference site is currently used for marketing, I have to revert to my backup copy. Therefore, I am unable to give a URL for this problem. I will, however, provide one as soon as I get my dummy site up
<span id="alertTxt" style="text-align:center; color:#CC0000; display:none">Director of Information Technology, Network Communications, Security, Smart Metering, Operations, C-Level Executives</span>
<span id="alertTxt2" style="text-align:center; color:#CC000; display:none">This Conference is for You!</span>
<script type="text/javascript">
function animateTxt() {
$j("#alertTxt").fadeIn(2000);
$j("#alertTxt").delay(6000).fadeOut(1500);
animateTxt2();
window.setInterval("animateTxt()",22000);
}
function animateTxt2() {
$j("#alertTxt2").delay(1500).fadeIn(2000);
$j("#alertTxt2").delay(6000).fadeOut(1500);
}
animateTxt();
</script>
setInterval is used to set a repeating timer. if you keep using setInterval at the end of animateTxt() then you'll end up with lots of timers. either change it to setTimeout or move it out of the function.
You should re-write this to trigger when complete, like this:
function animateTxt() {
$j("#alertTxt").fadeIn(2000).delay(6000).fadeOut(1500, function() {
$j("#alertTxt2").delay(1500).fadeIn(2000).delay(6000).fadeOut(1500,function(){
animateTxt();
});
});
}
animateTxt();
Instead of queuing animations that may or may not finish on time, ending up in a growing queue, this triggers the animation to loop when complete. The method you currently have grows at linear rate, and animations begin stacking up and the queue builds fast...this ensures only one cycle is going at a time.

Categories

Resources