Embed web player in native iOS app
How to embed the THEOlive web player into a WKWebView in a native iOS app.
Prefer our iOS SDK
Next to our web SDK, we also offer an iOS SDK which is more optimized for native playback. Therefore, we recommend that SDK over using a WebView and loading the web SDK.
Create your webpage
Make an HTML page in which you add your THEOlive player. This example uses the embed player, but you can also use the npm player if you need more control.
<!DOCTYPE html>
<html>
<head>
<title>Testing embed.js</title>
</head>
<body>
<div
data-theo-live-id="<your-channel-id>"
style="width: 600px; height: 400px"
></div>
<script
type="text/javascript"
src="https://cdn.theo.live/player/embed.js"
async
></script>
</body>
</html>
Host this page on a location that is accessible from your native iOS application.
Configure your WKWebView
To enable autoplay make sure to enable inline playback. To do this:
- create a WKWebViewConfiguration
- set its allowsInlineMediaPlayback to true
- pass that configuration to your webview when initialising it
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: .zero, configuration: configuration)
Add the WKWebView to your app
Now load the webpage you made in the first step and embed the WKWebView somewhere in your app.
let yourWebPageURL = URL(string: "https://your-custom-embed-page.com")!
let urlRequest = URLRequest(url: yourWebPageURL)
webView.load(urlRequest)
yourView.addSubview(webView)
Updated 9 months ago