https://unityads.unity3d.com/help/advertising/campaign-design-guide#playable-ads & Hype

unityhandler.js

// Wait for the SDK to become ready: 
if (mraid.getState() === 'loading') {
	// If the SDK is still loading, add a listener for the 'ready' event:
	mraid.addEventListener('ready', onSdkReady);
} else {
	// Otherwise, if the SDK is ready, execute your function:
	onSdkReady();
}

// Implement a function that shows the ad when it first renders:
function onSdkReady() {
	// The viewableChange event fires if the ad container's viewability status changes.
	// Add a listener for the viewabilityChange event, to handle pausing and resuming: 
	mraid.addEventListener('viewableChange', viewableChangeHandler);
	// The isViewable method returns whether the ad container is viewable on the screen.
	if (mraid.isViewable()) {
		// If the ad container is visible, play the ad:
		showMyAd();
		// This might be *before* the Hype document has pushed the event HypeDocumentLoad
	}
}

// Implement a function for executing the ad:
function showMyAd() {
	HYPE.documents['mydocument'].startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
}

// Implement a function that handles pausing and resuming the ad based on visibility:
function viewableChangeHandler(viewable) {
	if (viewable) {
		// If the ad is viewable, show the ad:
		HYPE.documents['mydocument'].continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
		//showMyAd(); 
	} else {
		// If not, pause the ad.
		HYPE.documents['mydocument'].pauseTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
	}
}


// check whether the Hype document is ready. If it is, run showMyAd();
if ("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
	"type": "HypeDocumentLoad",
	"callback": showMyAd
});