• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

Hide and show html element until video is completely watched.

[Solved]

Foliovision › Forums › FV Player › How to … › Hide and show html element until video is completely watched.

  • Kendell 5 years, 9 months ago

    Hi,

    I’ve been looking at the Tracking API Events in the programmers guide. I’d like to hide a button with the id of “mark complete” until the user watches the entire video.

    Can you please show me an example code to achieve this?

    Thanks in advance!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Juraj Kacaba 6 years ago
    Avatar photo

    Hi Kendell,

    Thanks for contacting us!

    I’ve forwarded your question to our Senior programmer Martin.
    He’ll get in touch with you in the close future.

    Thanks for being part of the Foliovision,

    Juraj

    Kendell 6 years ago

    Thanks Juraj,

    Looking forward to a reply.

    Martin 6 years ago

    Hello Kendell,

    if you know a bit of JavaScript and you can add your own JavaScript code to your website this won’t be a problem. I suggest I read the part about How to add your code here: https://foliovision.com/player/advanced/api-programming#how-to

    There you can see code samples to hook an event to the Flowplayer ready event. Flowplayer is the video engine used in FV Player. So just change that event name “ready” to “finish” and put in the JavaScript code to show your hidden HTML element.

    Thanks,
    Martin

    Kendell 6 years ago

    Thanks for the reply.

    Just to confirm- Using the Flowplayer ready event, is the video tracking feature applied automatically? Because I’d like to prevent users from seeking through the video to finish.

    Kindly let me know.

    Martin 6 years ago

    Hello Kendell,

    if you mean that you would like to only show that popup if the user has watched the video until the end, and he didn’t just seek to the end of it, you can use the “fv_track_complete” event for that purpose, although it triggers a bit differently.

    You can open https://foliovision.com/ and run this on the browser console:

    flowplayer(0).bind('finish', function() { console.log('finish!') } );
    jQuery('.flowplayer').bind('fv_track_complete', function() { console.log('fv_track_complete!') } );
    

    See that when you click to play the video and seek near the end and let it finish only “finish!” shows up. But if you play through the video (you can seek forward, but in small steps like 10 secods ).

    Another difference is that fv_track_complete triggers even if you don’t watch the video until the absolute end of it – that is to track the users who basically saw the whole video, but parhaps closed it a bit earlier.

    So the winning event hook would be:

    jQuery('.flowplayer').bind('fv_track_complete', function() {
      jQuery(this).data('flowplayer').bind('finish', function() { 
        console.log('finish!')
      } );
    } );
    

    So it’s a bit more complex than I anticipated. We designed these video tracking events to make it possible to integrate your own tracking calls, but if you want to make a end popup which only shows up if somebody really watch the video until the end, that is something a bit different.

    Thanks,
    Martin

    Kendell 6 years ago

    Hi Martin,

    So just to be clear.

    The code below will work even though the user skips ahead in the video by some seconds? For example, we have a 3 mins video, the user begins to watch it and skips to 2:34s in the video. On completion the video will still be treated as complete?

    jQuery(‘.flowplayer’).bind(‘fv_track_complete’, function() {
    jQuery(this).data(‘flowplayer’).bind(‘finish’, function() {
    console.log(‘finish!’)
    } );
    } );

    Martin 6 years ago

    Hello Kendell,

    the user can seek ahead a bit, but if he just seeks near the end and then waits for the video to finish it won’t trigger.

    Thanks,
    Martin

    Alec Kinnear 6 years ago
    Avatar photo

    Hi Kendell,

    What Martin wrote is pretty clear. Please experiment with the player and events and the code which Martin has already supplied.

    If you’d like further support on this issue, please pick up a pro support incident.

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
Reply To: Hide and show html element until video is completely watched.



Please Sign in or Register to upload files.

Related Posts

  1. How to add a button for show or hide transcripts?

    How to add a button for show or hide transcripts?

  2. Hide Fv player and show when pressing custom play button

    Hide Fv player and show when pressing custom play button

  3. Hide AB Looper Bar when you hover mouse away from video player

    Hide AB Looper Bar when you hover mouse away from video player

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!