Contents
Embedding
The Smartzer player can be embedded in both Android and iOS native apps by using a WebView. This allows the app to render the player as well as send and receive events. You should always set a url parameter of “isApp” when embedding so that if there are any native actions that need taking, the Smartzer player knows to do so.
When a user triggers an action, Smartzer will send the payload of the action via a “postMessage” to the App that wraps the WebView. You can listen for that event and action upon it like so:
Android
Build an object to handle the postMessage call
class SmartzerPostMessageHandler {
@JavascriptInterface
public boolean postMessage(final String json) {
// parse the json and then do
// some custom action here using the content of json.cta
return true; // here we return true if we handled the post.
}
}
When you create the webview, you can just attach the MessageHandler
WebSettings webSettings = view.getSettings();
webSettings.setJavaScriptEnabled(true);
view.addJavascriptInterface(newSmartzerPostMessageHandler(), "smrtzrApp");
IOS
For iOS it's similar and you can see a tutorial here https://medium.com/john-lewis-software-engineering/ios-wkwebview-communication-using-javascript-and-swift-ee077e0127eb
The handler will be called from Smartzer’s side as
window.webkit.messageHandlers.smrtzrApp
So when you add the controller to your webview, you should do as below:
configuration.userContentController.add(self, name: smrtzrApp)
Sending events to the player
The Smartzer player can receive pause/play events from a parent page/app. If you would like to send these, you must add “usingExternalComms=true” to the url of the player
Android
Button pauseButton = (Button) findViewById(R.id.pause);
Button playButton = (Button) findViewById(R.id.play);
final String pauseEvent = "{ source: 'SmartzerCommunicator', eventType: 'AUTO', eventSource: 'PLAYER', eventName: 'suspendVideo', data: {} }";
final String playEvent = "{ source: 'SmartzerCommunicator', eventType: 'AUTO', eventSource: 'PLAYER', eventName: 'resumeVideo', data: {} }";
pauseButton.setOnClickListener( new View.OnClickListener() {
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void onClick(View v) {
view.evaluateJavascript("(function() { window.postMessage(" + pauseEvent + "); })();", null);
}
});
playButton.setOnClickListener( new View.OnClickListener() {
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void onClick(View v) {
view.evaluateJavascript("(function() { window.postMessage(" + playEvent + "); })();", null);
}
});
IOS
let pauseEvent = "{ source: 'SmartzerCommunicator', eventType: 'AUTO', eventSource: 'PLAYER', eventName: 'suspendVideo', data: {} }"
let jsFunc = "(function() { window.postMessage({ source: 'SmartzerCommunicator', eventType: 'AUTO', eventSource: 'PLAYER', eventName: 'suspendVideo', data: {} }, '*'); })()"
self.webView.evaluateJavaScript(jsFunc, completionHandler: nil)