Foliovision › Forums › FV Player › How to … › Creating a loop function
-
Hi I was wondering if it would be possible to add a function to the player that would allow the viewer to select a portion of the video to loop over and over again.
Example
Video is 5 minutes long.
Viewer selects cuepoint A at 1 minute into the video. At 1:15 the viewer selects cuepoint B. Now the player jumps back to cuepoint A and when it gets to cuepoint B the player will loop between A and B over and over until the loop is turned off.
Thanks,
John
-
-
Hi John,
This is a great idea but most users can’t be bothered to use something like this.
Could you send us to an implementation you like?
If it’s not too hard to implement, we’ll take a look at it. With the current technology, you could actually set up the loops in advance for the key sections (still using a single file). Would that work for you?
Making the web work for you, Alec
Hi Alec,
Thanks for the response. Here is something that is similar. I would like to just use keyboard shortcuts and not have the graphical interface which I think is a little confusing. Having the A and B where you can drag it.
https://www.guitartricks.com/v2/lesson.php?input=17169&s_id=1288
I’m doing guitar lessons as well so it’s a great feature for students to be able to loop a piece over and over.
I don’t think it would work for loops in advance as i would like the student to be able to choose what section they would like to loop.
I also have over 1000 videos spanning 70 hours so adding loop points would be very time consuming and not really worth the time.
Thanks!
John
I didn’t think that one was. Maybe this one
Hi John,
We definitely do custom development. Here’s a pricelist for some common requests. Of course we do completely custom work as well.
Thanks for asking.
Cordial regards,
Alec
Hi Martin,
Thanks a lot! The keyboard commands work great but I think the buttons will make it much easier for the user to know what to do. I’ve told my subscribers about the function but I don’t think many of them understand what to do and putting the buttons there will make it very easy to work.
John
Hi John!
We could accelerate the A-B interface. It would work only in the HTML5 version (what most browsers and people are using) and not in the native players (iOS, Android mostly) or in Flash.
The reason is that native players have their own interfaces – we don’t control them and Flash is another playback environment (although we try to make Flash and HTML5 look very similar for consistency).
Your investment would be $1000. We would also offer you a perpetual five domain license in recognition of your support.
Thanks for being part of Foliovision!
Making the web work for you, Alec
Hello John,
we worked on the custom AB loop functionality, first demo can be seen here: https://foliovision.com/player/demos/user-ab-loop
We need to do more testing and improve the styling though.
Thanks,
MartinHello John,
thank you for the feedback! We fixed the full-screen mode: https://foliovision.com/player/demos/user-ab-loop
If you want to see the rest of the video, you can seek past the “B” (loop end) marker, it will play until the end of video. Then if you play the video again, it will start at the “A” (loop start) marker and loop the selection again.
We also added previews – when you drag the loop markers, you will get a smaller preview to see what part of video is the marker in. These won’t work in Flash though.
Thanks,
MartinHi Martin,
Very nice.
We could consider a button to turn on/off the loop altogether on the timeline bar. When you turn it back on, it would remember the last loop settings you put in. Right now of course, one only needs to reload the page to get back to zero. Truly minimalistic.
PS. Love the choice of video. Very entertaining.
Hi John,
We’d like to get this into your hands so you can see how the interface works for musicians. We want the process to be as simple and intuitive as possible.
Hello John,
FV Player Pro 0.3 is out: https://foliovision.com/2015/05/vimeo-channel-player
The AB loop feature is included, although is not exposed much. Just add ab=”true” to your [fvplayer] shortcode by hand and you will get the AB loop feature working. The reset button is not there yet.
Please let us know if you notice any issues.
Thanks,
MartinGreat! I’ve been playing with it some and could you make the A B buttons a little smaller and maybe have a graphic that labels each one A then B?
For some short passages to learn on guitar it might make it difficult to select a very short time span due to the width of the buttons.
I was thinking something like this.
http://www.learningguitarnow.com/images/loop.jpg
Let me know what you think. Thanks!
John
Hi John,
Thanks for your notes. I can see how a slower slide through would help. Granular editing makes the task much harder.
Martin, what we should be trying for is that quick movements move further than slow movements.
Hi Martin,
Could you include a global preference to turn on the AB option? Thanks. There should then be a way to then turn it off on individual videos (probably the sales page videos but none of the demo videos).
Thanks.
Making the web work for you, Alec
Hello John,
please check Settings -> FV WordPress Flowplayer -> Vimeo (Pro) -> “Remove Vimeo information from player element title” to hide the “Vimeo” in the label.
This is used for Google Analytics tracking. So I guess we should only set this if Google Analytics tracking is actually used.
Thanks,
MartinHi Martin,
We’re trying to turn off that tooltip hover altogether now (which solves the problem with Vimeo showing as well).
Hi John,
Martin and I have looked into precision for AB loops. The closest we can come without rebuilding the application is 0.5 seconds. On top of that Martin has quite correctly reminded me that mouse speed movements are really a desktop application device and are not every consistently implemented on the web.
As implemented now, the AB loop will be fairly imprecise on long videos (forty minute, one hour) and easily made fairly precise on short videos (three minutes, five minutes).
To get to real precision right now the only way which would work would be to make the AB loop either two layers (hideous interface) or that the AB loop would only grab one minute (thirty seconds from each side) from where the cursor is when someone hits an AB button on the main toolbar. We could signal this with a -30 on the left end of the loop control bar and a +30 on the right end of the loop control bar.
Your thoughts?
Making the web work for you, Alec
Hi Alec,
Most of my videos are around 5-10 minutes so I think it will work fine the way it is.
I would just like to customize the entire interface with better styling similar to something like this.
I think it’s a lot more intuitive with that interface as AB looping is pretty common knowledge in the guitar lesson community. It’s a highly requested feature.
http://www.learningguitarnow.com/images/loop.jpg
Can that be done?
Thanks!
John
Hi Alec,
I’ve gotten some feedback from a subscriber.
“I like the idea, it’s simple, but I would have the looping line there permanently, not just there when you run the cursor over it. And I had to do it a couple of times to realize it loops from middle mark in the buttons which is very light, somehow that marker should be darker, Or arrows defining the loop area better, other than that it’s great.”
So I was thinking maybe if this could happen –
AB loop to always show when the video plays in the webpage.
AB loop to only show on hover when Full Screen is enabled.
Not sure if that is possible but that would work great.
Thanks,
John
Hi John and Martin,
I’ve done up a mockup of a very simple interface. I’ve included an AB loop button in the play bar to keep the player very simple when the AB functionality is not being used. The button needs to be improved (probably end up being a silver button) or it could be something visual like this.
Alternatively, it could be a simple vertical marker symbol.
The AB loop bar would be the full width of the video and would use the same colours as the main play bar. At each end there would be a simple A and a simple B. By dragging the A and by dragging the B, you set the end points.
We could of course just put small markers under the existing timeline but that’s very dangerous in a web interface as clicks are not nearly as precise as a desktop application. By offering a simple secondary timeline it should be difficult for people to break or stop the player.
To turn off the loop, all the user has to do is click the loop interface button again. Looping only works when the secondary timeline is visible. This solves the issue of an interface for stopping the looping. My instinct is for the AB interface to remember the last two points until page reload at least (we could consider holding those points attached to that visitor, but it would be another scale of work).
John, would this interface satisfy your visitors’ needs?
Making the web work for you, Alec
Hi John,
My inclination would be to not make the AB interface available in full screen mode (although the loop could play if AB was already engaged). I.e. you’d have to come out of full screen mode to be able to use AB.
Martin and I will have to talk about the ramifications for full screen mode before we give you a definitive answer.
Making the web work for you, Alec
Hi John,
I did come up with a design but Martin is not happy with me putting buttons in the control bar. We’re also having discussing the length of the AB bar: whether it should be the full width of the video (advantage: more space for fine control) or just the length of the existing timeline (advantage: AB controls correspond precisely to the spots on the main playbar).
Which would you prefer: full width AB controls or shorter control bar but matching the main playbar?
Thanks!
Making the web work for you, Alec
PS. Martin, we’re going to have to sort this out (even if we change it later) as we’d like to complete the AB looping feature for John.
Hi Alec,
I think it makes the most sense to make the AB bar the same size as the timeline as people will want to mark the A or B spot as they are watching and will click where that’s at.
If it did not correspond with the time line then I believe it would be more confusing.
I like the idea of having the bar there at all times. Easy to understand with the right design.
What would be the issue with the AB button being there?
If it’s in regard to other people using the player then I think there should be a way for only me to have the AB functionality since I have paid for it.
What do you think?
Thanks,
John
Thanks for your input, John.
The issue with the AB button is a technical one. Martin wants to put it on-screen and I don’t. I guess we’ll release the onscreen version now as that can be done right away.
In terms of payment, the AB functionality was put into rapid development and is being adapted to your needs specifically. You only are paying a fraction of the real development costs. The idea here is that you get what you need now and we are able to improve the player.
I assure you would not like this to be completely custom functionality as then you’d be on the hook for any maintenance. When the AB feature is incorporated into core, you get free maintenance as we’ll make any changes to AB necessary to keep it working in the future (unless we don’t put it into core).
Making the web work for you, Alec
Hello John,
please upgrade to FV Player Pro 0.3.2, this has been released: https://foliovision.com/player/demos/user-ab-loop
You will have to upgrade FV WordPress Flowplayer as well.
Please let us know how it works for you.
Thanks,
MartinHi John,
I’m so happy you like the AB roll.
Is the issue that you are not getting our intended colours or that the colours are being overridden by your theme?
Hi Martin,
If the colours are being overridden, we need more resilient classes. We should also make it easy for people to change these colours. I.e. they should match the rest of the player so someone doesn’t need to change the colours in two places.
Making the web work for you, Alec
Hello John,
fixing that is high on our list. I fixed it now.
Please reinstall FV WordPress Flowplayer – remove and install again. Also upgrade FV Player Pro to 0.3.3.
Regarding the AB color issue – it’s a bit tricky, as normally the numbers are bright on dark background, but the A and B buttons are bright with dark A and B letters. Where can we see this on your site to figure it out?
Thanks,
MartinHi Martin,
That’s great thanks!
Yeah the issue is with the A and B text as it seems connected to my site text somewhere.
You can look at it on this page.
‘http://www.learningguitarnow.com/premium/a-b-testing-page/’
Thanks,
John
Hi John,
Thanks for your suggestion.
We’re not interested in removing the Vimeo title, just the Vimeo branding. We could do this but it would be custom code at this point (we don’t want to add it to core). The better solution would be to name your videos on Vimeo in such a way you are comfortable having the titles appear.
Making the web work for you, Alec