-
Hi
I am currently developing an extension on top of FV Player Pro to allow chapters to be used in full screen mode. These chapters are used to create pre-made AB loops.I am curious as to whether there are API features I can utilise to create loops, view loops and so on as well as getting full access to the chapters.
Thanks for any help
-
-
Hi
I have emailed Foliovision and posted a topic (entitled “Chapters and AB Looping API”) and have yet to receive a reply. I am a paying FV Player Pro customer and would like to use this product for our video platform but without communication from FolioVision I cannot proceed.
FV Player Pro offers the closest feature set to the one we need, but alternative players have far more comprehensive API documentation than what Foliovision offers and we absolutely need API access for the features I am trying to implement.The API access I need should cover the following areas:
1. Setting AB loop start and end points
2. Getting AB loop start and end points, preferably tied to an event that fires when the loop is updated
3. Getting chaptersAdditionally, being able to customise the video player via CSS and HTML would be a massive benefit.
Please respond to this or my original post as soon as possible. If FV Player Pro is not able to provide these features it will not be suitable for our purposes and as a result, we would like to be refunded while we consider other player options.
Thanks
Hello Harry,
sorry about the delayed reply.
2) Reading the AB loop is easy, here’s how you can keep track of the changes with the right event:
jQuery(document).on('slide', function(e) { console.log( jQuery(e.target).val()); // you can use jQuery(e.target).parents('.flowplayer').data('flowplayer') to get to Flowplayer API object here });1) Setting is a bit cumbersome, but could be improved:
fv_player_chapters_ab( jQuery('.flowplayer'), jQuery('.flowplayer').data('flowplayer'), {start seconds}, {end seconds} );Of course the jQuery selector would have to be adjusted to pick the player you need to adjust.
3) Adding chapters is currently only possible via fv_player_pro_chapter() function which accepts the VTT subtitles file, which might not be ideal. What data would you like to feed in?
4) CSS customization – you can customize the player, however we are working on upgrade to Flowplayer 7 core right now, which will change the player skin a bit.
5) HTML customizations – there are some filters, but these should be used with care. What exactly would you like to customize? There is a list of filters on https://foliovision.com/player/advanced/api-programming
6) Chapters in fullscreen – we could improve it to work in fullscreen. It might be easy to desktop, but for mobile users it gets quite tricky – do you have any ideas about how to keep the interface usable on small screens? We will talk about it in our team if we would like to improve this in our plugin.
Thanks,
Martin
Hello Harry,
could you please let us know about the above?
Thanks,
Martin
Hi Martin, thanks for your detailed reply and I apologise for not getting back to you on this earlier.
I can say that as of right now, we have been busy with our product launch and have delayed the chapter and looping features we planned on implementing for a later date. That being said, we are eager to implement these features and I can provide some feedback on how relevant these answers are to my query.The features we currently want to introduce are as follows:
Loops in full screen, including on mobile (shown as a horizontally scrollable container over the video)
Separate chapters from the loops, so we can have loops of particular parts of the video and chapters of other parts of the video. This is particularly useful for the educational video format we are using.Now on to the answers:
2) This jQuery code seems like exactly what we want
1) Again this sounds ideal, thanks
3) As far as I’m currently aware we have no interest in adding chapters via JavaScript. Instead, we want to get the chapters that FV player has read from the .vtt file and split them into two categories (to be displayed in two separate parts of the interface) as described above. Some chapters will act as loops, others will be video sections. We currently intended to do this with a delimiter character before chapters, so if a chapter starts with the character @ for example, it’s a loop. If it doesn’t, it’s a section.
4) We have discovered that there is some flexibility here in terms of just using the selectors that FV player uses in our CSS files. That being said, we sometimes get undesirable results. The main issue right now is that we want to restyle the start and end loop indicators (the I and O) to look reminiscent of the pins featured on Google Maps, or something similar. This is purely because a smaller point on the indicator will be more accurate than a larger rectangle as FV player currently uses.
5) The HTML customisation was to place the chapters menu inside the video element itself. We have achieved this by appending HTML via jQuery, but it’s not a clean or sustainable solution.
6) If you could implement chapters in full screen, that would save us a lot of work with this task. The way we planned it is that we would add a new button to the bottom left of the window (next to the AB looping button) which would be called Chapters or something to that effect. Once clicked, a panel would appear over the top section of the video. The panel had a fixed button at the top to close it, and the rest of the panel scrolled horizontally, revealing all of the loops (which we formatted to be in rectangles, instead of bullet points). The rectangles in question had the time stamp at the top, description in the centre and the create loop button at the bottom.Given that we would like a way to split pre-defined loops and other chapters into two separate lists, so that we can display them in different panels, is there any advice you would suggest for this? I can provide more information if needed.
Thank you very much for taking the time to read this, I hope this was helpful and thank you again for your detailed response. Please reply with any questions, comments or answers you have for us.
Harry
Hello Harry,
3) Separate chapters and loops – you said you want to use the data FV Player Pro loaded from VTT. I checked that and it’s not so simple to re-use our code here. We could refactor it a bit to allow you to call something like fv_player_pro_parse_chapters( {player}, {vtt file}, {targetdiv} ). That way you could have one VTT file for chapters and one for loops and have them render into separate containers.
4) AB loop “I” and “O” buttons – we are improving the appearance of these for FV Player 7. However they can’t be too small as then they are hard to tap on tablets and mobile.
5) Placing the chapters menu inside the video element – you could just place the target div (which I mentioned above as a parameter of the fv_player_pro_parse_chapters()) into .fp-player. That would be a good start to have it appear above the player and in fullscreen.
While we might be interested in having the chapters show up above the player and in fullscreen, I’m not sure if rectangles would be our preferred display style. A simple vertically scrollable list might be easier to navigate.
Thanks,
Martin
Hi Martin,
3) Thank you very much, this solution would be perfect. Using separate divs for different VTT files should give us all the freedom we need.
4) We were hoping to use a “pin” style similar to Google Maps pins, which have a fine point so you can see where the loop itself starts and ends, but also has a larger circle area for ease on touchscreens.
5) As you say, unless FolioVision decide to implement this as a feature, we could use the fv_player_pro_parse_chapters function to use styled divs as a solution to this problem.
Thank you again for your continued interest in helping us with this issue. We are extremely pleased that you are willing to provide us with a solution in the form of a new function for parsing chapters. If this solution is provided we can keep you updated with any progress we make on this issue and provide you with feedback of the new functionality.
Thanks
Harry
Hello Harry,
there will also have to be a way of associating that extra VTT file with FV Player. It could go into shortcode like loop=”chapters-for-loop-only.vtt”, you can then load that up in custom PHP code and have it appear as data on the FV Player element (and then you could call that new function to create chapters from it). I can document that in the FV Player API guide.
Thanks,
Martin
Hi Martin,
Thanks, that would be fantastic. Please keep us updated on this new feature.Thanks
Harry
