Adding a background video

Forum to discuss the new web client version of Servoy.

Adding a background video

Postby dfernandez » Wed Jul 27, 2022 9:27 pm

I added a video to the Media folder. How can I use it as background for the login screen?
I also tried with a web component but I do not know how to reference that file in the Media folder.

Thanks
dfernandez
 
Posts: 87
Joined: Wed Feb 29, 2012 4:04 pm

Re: Adding a background video

Postby mboegem » Thu Jul 28, 2022 10:23 am

Hi,

I had a quick play as I was curious myself on how easy this would be.
This is the result of my attempt:
video_example.servoy


What steps did I take:
1. Create a form with a label (name: lbl_bg_video') that covers the whole page (in my case a form type 'css position layout' with the label css position set to: '0,0,0,0,-1,-1')
2. Set the styleClass of the label to: 'video-wrapper' and the showAs-property to 'trusted_html
3. Create an onShow function on the form and attach it to the onShow event handler of the form
4. Insert below code in the onShow function
Code: Select all
   var _sTemplate = '<video playsinline autoplay muted loop><source src="[MEDIA_URL]" type="[MIME_TYPE]">Your browser does not support the video tag.</video>';
   var _sMediaName = 'sample_video.webm';
   var _sMediaURL = application.getMediaURL(_sMediaName).replace(/\?.*$/, '');
   var _sMimeType = solutionModel.getMedia(_sMediaName).mimeType;
   
   var _sHtml = _sTemplate.replace(/\[MEDIA_URL\]/, _sMediaURL).replace(/\[MIME_TYPE\]/, _sMimeType);
   
   elements.lbl_bg_video.text = _sHtml;


5. Set the '_sMediaName'-variable with the name of your video
6. Add the following css to your solutions css/less stylesheet:
Code: Select all
video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}


This is it and after launching the client, you should see the video playing.

Hope this helps
You do not have the required permissions to view the files attached to this post.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1742
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Adding a background video

Postby dfernandez » Thu Jul 28, 2022 3:35 pm

Thank you Marc!
dfernandez
 
Posts: 87
Joined: Wed Feb 29, 2012 4:04 pm

Re: Adding a background video

Postby dfernandez » Thu Jul 28, 2022 4:29 pm

dfernandez
 
Posts: 87
Joined: Wed Feb 29, 2012 4:04 pm

Re: Adding a background video

Postby mboegem » Thu Jul 28, 2022 9:57 pm

Nice!
Glad that worked out for you :-)
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1742
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 5 guests

cron