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.

iOS / Swift

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

Attributes	Required	Description
resource_token	Required	Refer to the steps to obtain the token.
lang	Optional	Locale (zh, ja, en).
t	Optional	The default timestampe (seconds) to start playback when player initiated.
shareUrl	Optional	The 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

Android / Kotlin

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import android.webkit.WebView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById<WebView>(R.id.webView)
        val webSettings = webView.settings
        webSettings.javaScriptEnabled = true
        webView.webChromeClient = WebChromeClient()

        webView.loadUrl("https://showroom.one.blendvision.io?token=resource_token&lang=en&t=0&shareUrl=example.com")
    }
}

Iframe Attributes

Attributes	Required	Description
resource_token	Required	Refer to the steps to obtain the token.
lang	Optional	Locale (zh, ja, en).
t	Optional	The default timestampe (seconds) to start playback when player initiated.
shareUrl	Optional	The 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

Note

Permissions (Android): Ensure you have the necessary permissions set in your AndroidManifest.xml file if your WebView requires internet access.

Autoplay

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

iOS / Swift

webView.configuration.mediaTypesRequiringUserActionForPlayback = .none

Android / Kotlin

webView.getSettings().setMediaPlaybackRequiresUserGesture(false)

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.

iOS / Swift

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
    }
}

Android / Kotlin

// Define a message handler to receive playback status
class MyWebMessageHandler(private val webView: WebView) : WebViewCompat.WebMessageListener {
    override fun onPostMessage(webView: WebView?, data: Any?, ports: Array<out MessagePort>?) {
        // Handle playback status updates from the player
    }
}

// Create a WebView
val webView = WebView(context)

// Enable postMessage API for the WebView
WebViewCompat.setWebContentsDebuggingEnabled(true)

val messageHandler = MyWebMessageHandler(webView)
WebViewCompat.addWebMessageListener(webView, messageHandler)

// Send a play command to the player inside the WebView
val message = "{\"event\":\"command\",\"func\":\"play\",\"args\":[]}"
val messageChannel = WebViewCompat.createWebMessageChannel(webView)
val messagePort = messageChannel.port1
webView.postWebMessage(WebMessage(message.toString(), messageChannel.arrayBuffers), Uri.parse("https://showroom.one.blendvision.io"), arrayOf(messagePort))