Foliovision › Forums › FV Player › How to … › Hide and show html element until video is completely watched.
-
-
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,
MartinHello 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,
MartinHi 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!’)
} );
} );