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)