« MBS FileMaker Plugin,… | Home | Merry Christmas »

Zooming video containers on Windows


Have you inserted a video into an interactive container field on Windows and when playing the video looks like this?



Give the container field on the layout a name, e.g. MovieField. Now when you use WebView.GetHTMLText in the data viewer, you can get the HTML FileMaker generated to show the video. With a few JavaScript commands, we can adjust the video there:

MBS( "WebView.RunJavaScript"; "MovieField";
    "document.getElementById('Player').uiMode='none';
    document.body.style.transform='';
    document.getElementById('Player').stretchToFit=true; "
)

We just adjust a few parameters via JavaScript and pass them to the web viewer using our excellent WebView.RunJavaScript function:
First line gets player object and sets the user interface mode. This can be full, mini, invisible or none. We set it to none to hide the controls.
Next we remove the CSS transformation which causes the stretch to scale too much otherwise. Once the transformation is gone and the HTML viewer doesn't zoom in, we can ask the player to stretch itself to fill the space.
Works well here in FileMaker Pro 18 on Windows 10. Looks like this:



If you like to play the video right away, just add another JavaScript line to call play method:

document.getElementById('Player').controls.play();

If you have any questions, please do not hesitate to contact us.
20 12 19 - 20:52