Foliovision › Forums › FV Player › How to … › Pause video at a specific time based on custom field value
-
Hello,
I’m looking to add a custom field to the pages where the player will be embedded. That custom field will take a value entered by the admin (For example “1:30”) which will represent 1 minute and 30 seconds.
I’d like for that custom field value to trigger a pause(maybe using a js function?) when the video play back reaches that point (1:30).
Can you kindly guide me to a possible solution or advise me on the subject?
Regards,
Kendell
-
-
Hello Kendell,
you can use the progress event. I added a code sample to our guide: https://foliovision.com/player/advanced/api-programming#js-events -> “Here is a sample on how to pause a video if it goes to 10th second”
Thanks,
MartinGood day,
I’m looking into a hook to resume the video after it has been pause.
I’ve already went ahead to pause the video when the player reaches to a specific time. The user will be required to click some html that will trigger a resume. However, we’re not seeing a hook for resume. Can you please let me know if there’s a hook for this feature?
I’m also attaching some lines of code below of what we came up with to pause and display our custom html using the FV player. Hope it’s a bit useful to explain our case.
//Pause video on timestamp add_filter( 'fv_flowplayer_inner_html', 'my_fv_player_custom_popup'); function my_fv_player_custom_popup($html) { if( have_rows('video_settings_basic_video_settings_overlay_content') ): while ( have_rows('video_settings_basic_video_settings_overlay_content') ) : the_row(); $videostop_value = get_sub_field('video_time_stop_2'); $pull_over = get_sub_field('pull_over_content_2'); $time = $videostop_value; $timeArr = array_reverse(explode(":", $time)); $seconds = 0; foreach ($timeArr as $key => $value) { if ($key > 2) break; $seconds += pow(60, $key) * $value; } $timeInSeconds = $seconds; $html .= "<div class='my-custom-popup' data-attr='".$pull_over."/?botframe=on'><div class='my-custom-popup-content' data-attr='".$timeInSeconds."'></div></div>"; endwhile; else : endif; return $html; }
Thanks.
Regards,
Kendell
Hello Kendell,
you said the user will click some HTML and that will resume the video – you can easily find the player associated with that piece of HTML. Perhaps it’s nested in the player like a standard FV Player Popup would be.
Then you can call:
my_element.data('flowplayer').resume()
Or even just this if there is only a single player on page:
flowplayer(0).resume()
Thanks,
MartinHi Martin,
I’ve been having some issues with getting the video to play and then pause based on the time stops passed in to the player via some custom fields.
So this is my sample code and explanation below :
jQuery(document).ready(function(){ if( typeof(flowplayer) != "undefined" ) { flowplayer( function(api,root) { api.bind('ready', function() {}); var paused = false; api.bind('progress', function(e,api,time) { var timepause = jQuery('.my-custom-popup-content').data("attr"); var fixtime = time.toFixed(); if( !paused && fixtime == timepause ) { api.pause(); paused = true; alert("Hello! I am an alert box!!"); } }); }); } });
So lets say the time stops 10 and 20 were passed through the “my-custom-popup-content” data attribute. When the video reaches 10s it pauses at the first instance, the alert is triggered and upon closing the video resumes. However it doesn’t popup for the 20s time stop or any other subsequent time stops. Am I using the right set of functions to get the job done?
Kindly advise, Thanks.
Kendell
Hello Kendell,
I don’t see anything strange with the way you are pausing the player.
It seems to me that timepause should be an array with 10 and 20 as values, but you are comparing it as a string. I would make that array JSON encoded an then loop through it looking for that time or fixtime value.
Thanks,
MartinHello Kendell,
I think the issue is that you compare the values with ==. Since the progress event only fires about 4 times a second it might not trigger for the exact time value. You should be checking for the range to be +- half second of your desired time and remember when it already occurred.
Or it could use the cues API: https://foliovision.com/player/advanced/api-programming#cuepoints
Our Pro support would let us check the issue right on your website and either fix the issue (if you prefer) or provide guidance to help you finish your scripting.
Thanks,
Martin