Skip to main content

Embed Player into WebView (iOS / Android)

To embed BlendVision video/audio on demand (VOD/AOD) and livestreams into your iOS or Android application with WebView, you can follow these general steps:

  • Create a WebView: In your iOS and Android app, create a WebView component. WebView is used to display web content within your app.

  • Load the video player URL: Load the showroom URL into the WebView component. Here's a basic example in both iOS (Swift) and Android (Kotlin).

This will load the BlendVision One video within the WebView in both iOS and Android apps. Make sure to handle any additional functionality or styling based on your app's specific needs.

import UIKit
import WebKit

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

    override func viewDidLoad() {
        super.viewDidLoad()

        if let url = URL(string: "https://showroom.one.blendvision.io?token=resource_token&lang=en&t=0&shareUrl=example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

URL Attributes​

AttributesRequiredDescription
resource_tokenRequiredRefer to the steps to obtain the token.
langOptionalLocale (zh, ja, en).
tOptionalThe default timestampe (seconds) to start playback when player initiated.
shareUrlOptionalThe URL to share on social media. If no value provided, the default URL will be set to https://showroom.one.blendvision.com?token=resource_token

Autoplay​

By default, WebView applies autoplay policy, but it's possible to turn off, and make autoplay happen without user interactions.

webView.configuration.mediaTypesRequiringUserActionForPlayback = .none

Content Protection / DRM​

To play a Video withm FairPlay content protection in iOS WKWebView, iOS version must be 13 or higher, there's no additional configuration needed.

To play a Video with Widevin / PlayReady content protection in Android WebView, ensure the permission is granted with override of WebChromeClient#onPermissionRequest:

override fun onPermissionRequest(request: PermissionRequest?) {
    request?.let { request ->
        if (request.resources.contains(PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID)) {
            request.grant(request.resources)
            return
        }
    }

    super.onPermissionRequest(request)
}

WebView Considerations​

WebView provides a quick way to embed / integrate videos into your app, but this may not be ideal for performance or UX critical usages, and WebView integration has more limitations.

Native app integration is designed for building good UX and performance, please consider switching to native integration before going further into advanced WebView integration.


Playback Status Sync / Control across WebView(Advanced)​

The player constantly reports its status with postMessage, to receive these status update data, you can use WKScriptMessageHandler(iOS) / WebViewCompat.WebMessageListener(Android), the message format is described in Track Playback Status.

To control playback inside, you can use evaluateJavaScript(iOS) / webView.postWebMessage (Android), the message format is described in Playback Control.

extension ViewController: WKScriptMessageHandler{
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let playbackStatus = message.body as? [String : AnyObject] else {
            return
        }
    }
}
let script = """
window.postMessage(
  JSON.stringify({event: 'command', func: 'play', args: []}),
  '*'
)
"""

webView.evaluateJavaScript(script) { (result, error) in
    if let result = result {

    } else if let error = error {
        // error handling
    }
}