21
Views
3
Comments
Solved
[OutSystems UI] Video Element - Detecting current state and triggering redirect on end of video
outsystems-ui
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive
Service Studio Version
11.54.27 (Build 62842)
Platform Version
11.23.1 (Build 40847)

Good morning All,

Hopefully this is a simple fix, and hopefully I'm massively overthinking my setup, but in a nutshell what I'm trying to achieve shouldn't be too hard, it's just getting my head around how to fix/ implement it.

The Goal: My client would like to have a 10 second video display when the app launches, in replacement of the default splash screen, which auto plays, and then when it's finished, it automatically moves you onto the main page of the application.

My Problem: Using the new Video feature, what is the best setup when using the new Events (OnChange I would assume) to detect when the video has stopped playing? Is there a way I can 'replace' the splash screen, or, is there anyway I could 'piggy back' the progress & loading of the splash screen, and integrate this video as part of the flow, so essentially when the app has loaded, check, and then when the video has reached a state of "Ended", also check, end flow with a redirect to the Home Screen.

I can't figure out the best way to run the flow to detect when the video has ended, as there will be no interaction from the user (video will autopay with no controls), do I just leverage the fact I know the intro is 10 seconds long and use a variable on the screen that way?

Or, do I have to forgo the idea of replacing the splash screen and instead have an interim page which the splash screen directs too, plays the video, then from there moves onto the Home Screen. If I have to do it this way, I could remove the visual elements from the splash screen so it gives the user the impression their device is just taking a second to load the app, and after a few seconds it would redirect to the interim page (the user being unaware all together) and the video playing from there.. seems clunky, but I understand if the Splash screen should be left alone all together.

I have a video currently hosted on my WordPress Website, and I'm using that direct URL (with .mp4) to fetch the video to play. The previous video feature is now depreciated, but I am already fetching another video with that, again via URL, so I know I can get this to work just fine. I don't need any additional feedback/ calls to be actioned from this second video so that's okay, but the new Video feature perfectly has the ability to detect the current status of it, so if I can figure that out, I'm convinced I should be able to get this to work! Literally this is the final element of the puzzle for the application!

Thanks in advance guys!

Warm regards,

Josh

Solution

Hello @Benjith Sam 

This was already identified by the team and is already on the release we code freeze last week (v2.18.0) and that has an ETA for October 30th.

Also, here you have all the currently available client actions for the Video (wrapper of the HTML5 video tag so you can manipulate it accordingly).

Best Regards,
GM


Hi Josh,

It's been a few days since this post, so you may have already found a solution for the mentioned requirement. However, if you haven't found a solution yet, you can utilize the StateChanged event handler of the OutSystemsUI Video element. In the handler's action flow, referencing the handler input parameter (VideoState) value you can conditionally navigate to the main page of the application. 

Unfortunately, the VideoState Static entity is marked as non-public within the OutSystemsUI module, so the IF conditional expression value will be:

VideoState = TextToIdentifier("Ended")

I'm tagging OutSystemsUI to this post to bring the above feedback to the attention of the relevant team. Thank you. 

I hope this helps you!


Kind regards,

Benjith Sam

Solution

Hello @Benjith Sam 

This was already identified by the team and is already on the release we code freeze last week (v2.18.0) and that has an ETA for October 30th.

Also, here you have all the currently available client actions for the Video (wrapper of the HTML5 video tag so you can manipulate it accordingly).

Best Regards,
GM


Thank you @Gonçalo Martins for the response and for providing the necessary information.


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.