Control interactive containers in FileMaker

[MonkeybreadSoftware]

Interactive containers in FileMaker are a great way to play videos in the FileMaker user interface. Whether you actually run a movie database or you use them for animations, they are implemented using web viewers. That means we can use our WebView.Evaluate function here from MBS FileMaker Plugin.

We got a little database file to try various calculations directly in FileMaker on macOS and Windows:

FileMaker uses a video tag in html, so we can find this element with the expression "document.getElementsByTagName('video')[0]" in JavaScript. You'll see it below a lot. It simply asks the document for the elements with tag names "video" and picks the first one. This just gets us the first video element. 

We run the JavaScript with our WebView.Evaluate function and run the JavaScript and get back the result. For the web viewer, just pass the object name for the layout object representing the container. The function then returns the result from JavaSciript or some error message if something goes wrong.

Please make sure there is a little pause between loading the record or going to the layout, before you try to access the interactive container. If needed, you can use our WebView.IsLoadingfunction to check the status.

Query Length

The first query is to ask for the duration of the video in seconds:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].duration;")

Position

For MacOS and Windows, you can query time using this command:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].currentTime;")

You can set the position:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].currentTime = 15;")

This works fine on macOS, but seems not to work for Windows.

Play

You can play the video by calling play() method on the JavaScript object:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].play();")

Pause

And to pause, you can use the pause() function:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].pause();")

Screenshot

You can use our WebView.Screenshot function to make a screenshot:

Set Field [ Movies::Screenshot ; MBS( "WebView.Screenshot"; "container") ] 

Volume

You can query volume with 

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].volume;")

Of course you can set this property by assigning a value:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].volume = 0.5;")

The range is from 0 for silence to value full volume with value 1.0.

Ended or pause flag

You can query the ended property to know whether the video ended:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].ended;")

And the paused flag:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].paused;")

Looping

Let the video loop by turning on the loop property:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0].loop = true;")

Muted flag

You can query muted flag to check if the video was muted:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0]. muted;")

Of course you can set this property by assigning a value:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0]. muted = true;")

To turn sound off or turn it on like this:

MBS("Webview.Evaluate"; "container"; "document.getElementsByTagName('video')[0]. muted = false;")

The range is from 0 for silence to value full volume with value 1.0.

Older versions

Please notice, that older versions of FileMaker use different techniques. On macOS the older versions may use WebKit 1.x, which may also be controlled via plugin. On Windows the older versions relay on Internet Explorer and a video plugin, which may no longer exist. if it still works, you may need different commands. For example you would play the video there like this:

MBS( "WebView.RunJavaScript" ; "player"; "document.getElementById('Player').controls.play();" )

Of course if you use older FileMaker 18 or older versions, please consider updating.

Please do not hesitate to contact us in case of questions.