Devcon 2016 WebDirect Series – Day 1 – Video Backgrounds in WebDirect

What is this?

This set of demo files, developed by Mike Beargie, were designed to allow a WebDirect custom app to use a video background on a form view layout. Video backgrounds are used to give motion to web apps and beautify user experiences.

DOWNLOAD FILES

How does it work?

  1. A set of javascript code, video and image files are hosted to a web accessible location.
  2. A web viewer object is set with the locations of the hosted files.
  3. WebDirect users are directed automatically to the video background layout.

How do I install it?

  1. Convert your video to .webm and .mp4 formats (use the free CloudConvert service).
  2. Snap a screenshot jpg file (used for browsers that can’t play videos).
  3. Host your video and image files in a URL accessible location.
    1. If you are hosting off of your filemaker server, host in the following directories:
    2. Win: /Program Files/FileMaker Server/HTTPServer/htdocs/
    3. OSX: /Library/FileMaker Server/HTTPServer/htdocs/
    4. This will correspond to http://_yourServerIPAddressOrDomain_/_yourFile.mp4/.webm/.jpg
  4. Go to the WebDirectVideoBG page, copy the code from the webviewer to a code-capable texteditor
    1. Do not use Textedit on the mac, it can mess with quotes and cause issues. I recommend TextWrangler.
  5. Replace all demo paths with links to your .mp4/.webm/.jpg files (do a search for “localhost” to find these).
    1. Make sure to leave all backslashes and quotes in place!
  6. Copy the modified code back to the WebDirectVideoBG and ThankYou page webviewers.
  7. Host the file, test in WebDirect!

Inspired by: http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

You can copy and paste this code freely into your solution, but this code is offered as-is, with no guarantee of support or function.

About Author: MBeargie
Mike is an application developer with MainSpring, a FileMaker Business Alliance Platinum partner and Business Driver of the Year 2013, 2014 and 2015. He is a FileMaker 11-15 Certified developer and has worked with the FileMaker Platform for over eight years. He has a formal education in graphic arts and IT management, and a background in web development and high level IT service. In his spare time, he is an avid poster on the FileMaker Community discussion forums, organizes and presents at the local FileMaker user group, COFMUG, in Columbus, Ohio. Mike received the 2014 FileMaker Business Alliance Excellence Award for Community of the Year.

Leave a Reply

Your email address will not be published. Required fields are marked *