Synchronizing Reference Videos in Google Earth Studio for Timing

Dan -

This article has been updated on Sep 1, 2023.

When animating in GES, an audio or visual reference may be needed for timing purposes. GES currently does not support the import of media to be used as reference. So here are two workarounds - the first one is for reference only, as it won't work out-of-the-box (we left it in as it might save you some research time if you attempt to pursue it) - skip to Method 2 Using Automation to Sync Playback Between Apps for the more functional approach on MacOS and Windows.

Preparation

For the reference video to play in sync with the GES timeline, the framerate needs to match. As of writing, GES supports only 24, 25, 30, and 48, 50, 60 fps. So if you are working at 23.976 you may want to adjust the fps of the reference to 24 temporarily.

Method 1: Injecting a Floating Video Frame in the Browser Window

An ideal workaround would be to inject (via the browser console) some Javascript to create a floating video frame within the browser window that loads a local (or cloud uploaded) video, and displays it in a draggable and resizable popup window. The video playback would be toggled by the spacebar key so, when pressed, both the GES timeline and the video would play or pause.

Fortunately (but unfortunately for our workaround), modern browsers have security features implemented, such as Cross-Origin Resource Sharing (CORS), Content Security Policy (CSP), and the Same Origin Policy (SOP), that prevent loading files from domains that have not explicitly been granted permission by the current website (Google Earth Studio in our case).

Note: CORS is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It's a way to circumvent the Same Origin Policy, which is a critical security measure that restricts how a document or script loaded from one origin can interact with a resource from another origin. The Content Security Policy (CSP) is a security layer that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

So both local files, and files uploaded to a cloud server that can be accessed via a URL, are considered to be from different origins. Therefore, unless the current website (Google Earth Studio) permits it through CORS, browsers block the loading of these files to maintain web security.

There are ways to modify or bypass these security mechanisms. One way is to use a CORS extension to disable CORS altogether, or modify headers to allow access to a specific domain, but this causes issues with GES - disabling CORS actually prevents GES from launching!

Method 2: Using Automation to Sync Playback Between Apps

A functional approach is to have the video open in an application that supports instant playback via keyboard shortcut (commonly spacebar), alongside GES open in a browser window. Then an automation tool can detect the pressed key and trigger playback for both the video, and GES timeline, at the same time.

MacOS Setup

In MacOS we can leverage the now native Shortcuts app to build a workflow. If you are using an older macOS version that doesn't support Shortcuts, you can still build a workflow via Automator (the predecessor to Shortcuts). In both instances, we'll setup an action that will run an Applescript command. We can then assign a custom keyboard shortcut to this action, for quick access within any app.

Here is the Applescript code, that invokes the specified apps, then triggers the spacebar key for each. Make sure to specify the correct apps, and that they both use spacebar as the keyboard shortcut for playback. We used the MacOS native QuickTime Player app.

tell application "Google Chrome" to activate
tell application "System Events"
    key code 49 -- Simulates a spacebar key press
end tell

tell application "QuickTime Player" to activate
tell application "System Events"
    key code 49 -- Simulates a spacebar key press
end tell

Insert this code within the Run Applescript action, replacing the (* Your script goes here *) line.

Shortcuts Workflow

If you are unfamiliar with Shortcuts, it's an app that allows you to build workflows, by sequencing actions, to streamline tasks on MacOS:

A shortcut provides a quick way to get things done with your apps, with just a click or by asking Siri.
An action is the building block of a shortcut. Each shortcut comprises a series of actions and each action is a single step that performs a particular function. For example, a shortcut that shares an animated GIF might contain three consecutive actions: Get Latest Photos grabs the latest photos you took on your device, Make GIF uses those photos to build an animated GIF, and Send Message automatically sends the GIF to your recipients.

Let's set up the workflow:

  1. Open Shortcuts and create a new Shortcut - CMD N
  2. Search for Run AppleScript in the Actions Library panel to the right - CMD OPT 1, then drag it into the empty workflow area to the left (or double click the action).
  3. Replace the default AppleScript with the code above.
  4. Toggle the Details panel to the right - CMD OPT 2, then select Use as Quick Action and Services Menu, then you may add a keyboard shortcut using the button below.
  5. Before testing the shortcut, make sure that Allow Running Scripts is toggled on in Settings (CMD ,) > Advanced.
  6. Now make sure the reference video is open in QuickTime Player and GES is running in a Google Chrome window. Run the script by hitting the Play button in the header bar of the Shortcuts app!
  7. A notification may popup asking to allow Shortcut to access AppleScript. Choose yes! You may change this anytime in the Details panel under the Privacy tab.

Automator Workflow

Automator allows you to build custom workflows by stacking commands/actions via a simple drag and drop. It is Mac’s own solution to automate repetitive tasks.

Here is how to set it up:

  1. Open Automator and create a new Document.
  2. Choose Quick Action
  3. In the workflow area, drag Run AppleScript from the actions library.
  4. Replace the default AppleScript with the code above.
  5. Save the Quick Action.

You can then assign a keyboard shortcut to this Quick Action through System Settings > Keyboard > Keyboard Shortcuts > Services, or System Preferences > Keyboard > Shortcuts > Services on older OS versions (before Ventura, 13.0.0).

Note: There may be an accessibility restriction that prevents Automator from operating. If a popup mentioning this on launch doesn't appear, you can change the setting in System Settings > Privacy & Security > Accessibility > Automator.

Windows Setup

If you are on a Windows machine, you can download and install AutoHotkey - a free, open-source scripting language for Windows that allows you to automate tasks and create hotkeys -> https://www.autohotkey.com/

AutoHotKey Script

Below is an example script that enables to play or pause playback for both the GES timeline running in Google Chrome, and for the reference media loaded in Windows Media Player - using the CTRL SPACE shortcut key combination.

#Requires AutoHotkey v2.0

~^Space::
{
	if WinExist("Windows Media Player"){
		WinActivate
		SendInput "{Space}"
	}else{
		MsgBox "Open and load your reference in Windows Media Player first!"
	}
	if WinExist("Google Chrome"){
		WinActivate
		SendInput "{Space}"
	}else{
		MsgBox "Open Google Chrome and launch your project in GES first!"
	}
}

Note: This script will require AutoHotKey v2.0. At the time of writing v2.0 is the latest version available.

Here is an overview of the commands in the script:

  • ~^Space:: specifies the shortcut combination CTRL SPACE that, when pressed, will trigger the commands within the curly brackets {}. The ~ (tilde) informs that the shortcut will also work with whatever system shortcuts are set - maybe there is another program that is using this combination, so the tilde should ensure that the shortcut remains in effect globally. The ^ stands for CTRL. Note: See the list of available shortcut key options here -> https://www.autohotkey.com/docs/v2/KeyList.htm
  • The if/else statement is known as a conditional statement and allows us to test for a condition - in this case whether Windows Media Player, and subsequently Google Chrome are open, by checking the existance of each program's window, with WinExist. If any of those two programs are not open, a MsgBox will spawn with instructions on what to do - feel free to customize with your own instructions. Note: These statements are optional and can be removed, although can be useful for troubleshooting if the hotkey doesn't do anything when pressed. Conversly you may want to extend the program by adding more conditional statements for additional checks... read more about conditionals here -> https://www.autohotkey.com/docs/v2/Language.htm#control-flow
  • Before sending the "{Space}" shortcut to each program to toggle playback, each program window needs to be activated using WinActivate. Note: Read more about SendInput here -> https://www.autohotkey.com/docs/v2/lib/Send.htm#SendInputDetail, and learn more about WinActivate here -> https://www.autohotkey.com/docs/v2/lib/WinActivate.htm

AutoHotKey Workflow

Once AutoHotkey is installed:

  1. Open the AutoHotKey Dashboard via Windows Search, and create a New Script.
  2. Once named and saved, a new File Explorer window should be launched following the path where the script was saved.
  3. Right click on the new script file and choose Edit Script, or Edit with Notepad++ if you have Notepad++ installed (recommended for writing or editing code) -> https://notepad-plus-plus.org/.
  4. Paste the script code above -> AutoHotKey Script and save.
  5. Launch the script by double clicking on it (if already launched you may be prompted to replace the existing running instance of the script, so click yes).
  6. Before pressing the specified shortcut key combination (CTRL SPACE in our case), load the reference media in Windows Media Player and enable the loop functionality so that the media restarts playback when the end is reached.
  7. Next launch Google Earth Studio in an instance of Google Chrome (and make sure that the tab is active and that the project timeline view is visible).
  8. Now press the key combination CTRL SPACE and playback should start for both programs.

Note: Limitations include a slight delay in playback based on the responsiveness of the programs once the keypress is detected (and due to the script sending keypresses sequentially between programs as they are activated), and to restart playback you manually have to reset the playhead to the beginning of the timeline.

Resources

Related Content

GFXHacks - Automate File Renaming in Finder (OSX)
Renaming files can be an incredibly tedious task, especially when faced with hundreds of items. This can prevent us from being organized, often impacting our time and resources elsewhere in our workflows. Automation is key to ensure we keep files organized without wasting time doing it.
GFX HACKSDan

Update Notes

2023-09-01

  • Added Windows AutoHotKey Setup