Embedding in Mobile Applications

Embedding an Eko project in mobile applications is done by rendering the Embed URL of the project in a native web view component.

A common pattern is having the user tapping a component in the app to play, so an extra tap to start the playback once the web view is loaded is not needed. Add ?autoplay=true to the embed URL to prevent the extra tap.

iOS

Init a WKWebView object and load the embed URL.

Set the WebView’s mediaTypesRequiringUserActionForPlayback parameter to [], and allowsInlineMediaPlayback to true to provide a smooth user experience, not requiring user interaction to begin audible media playback.

Here is a basic example of the web view setup:

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.allowsInlineMediaPlayback = true
        webConfiguration.mediaTypesRequiringUserActionForPlayback = []
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()   
        let myURL = URL(string:"https://eko.com/tmw/101/embed?autoplay=true&publisherID=distributor")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

Android

Init a WebView object and load the embed URL.

Set the WebView’s setMediaPlaybackRequiresUserGesture parameter to false to provide a smooth user experience, not requiring user interaction to begin audible media playback.

The following example uses the loadUrl function of the WebView to load the project:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView myWebView = findViewById(R.id.webview);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setMediaPlaybackRequiresUserGesture(false);
    myWebView.loadUrl("https://eko.com/tmw/101/embed?autoplay=true&publisherID=distributor");
}