Give your web application a professional look!
Imagine a movie playing on the background of your remote form. This is also called Motion Background. This is how you can implement this in your Omnis application.
The picture shows the “jsLogin” Remote Form; but in general this is also possible with every Remote Form. License-free background videos are available on this website: https://www.motionbolt.com . For the example I used this video: https://www.motionbolt.com/race-day/
Setting up the “video” folder
To make this work in your development environment, it’s best to add a “video” folder below your HTML folder of your Omnis installation in \AppData\local or /Application Support. In this folder copy the video you want to use. Note that if the video is too large, it will cause delays on slow connections. I renamed the video to “movie.mp4”.
Displaying the video with the HTML Control
Now drag an HTML object onto your remote form and type the following into the $html property of the control:
<div><video autoplay muted loop><source src=”video/movie.mp4″ type=”video/mp4″>Your browser does not support the video tag. </video></div>
The “autoplay” entry makes the video start immediately and “loop” makes the video automatically start from the beginning when it reaches the end. The “source” entry then specifies the video itself relative to the HTML folder. If the browser can’t play a mp4 file, an error text is printed.
It is best to set the $edgefloat property to kEFPosnClient (for all layout breakpoints) and then set the $designactive property to kFalse so that the object does not interfere with the design of the other objects. If you want to turn this on again please use the Field List.
Using a PagedPane as a container over the video
You can achieve a good effect by using a Paged Pane control that has the $alpha value set to 220. This way the video still shines through a bit but the text input and fields are still clearly visible.
If you set the $edgefloat property for the PagedPane to kEFCenterAll, it will always be in the center of the web browser and if you turn on $hasshadow it will float above the video. Attention: you can only round the corners with $borderradius if $effect is set to kJSBorderPlain. If you want to make the border line invisible, set the $bordercolor to kJSThemeColorBackground.
Please note that the Video Resource must be copied to your web server for production. To do this, set up the subfolder “video” there and copy the video into it.
Andreas H. Pfeiffer