Embedding the AnyClip Watch in an App WebView Environment

This documentation provides a step-by-step guide to embedding the AnyClip player inside a WebView. Follow the instructions below to ensure proper integration.

Watch Embed Code

To embed the AnyClip Watch, implement the Watch embed code in your HTML.

Example of a watch embed code:

<div id="anyclip-container"></div>
<script>
window.ac_vh_params = {
  containerId: 'anyclip-container',
  folderName: 'XX/XXXX'
};
</script>
<script src="https://watch-app.geniusplus.ai/main.js"></script>

Page Header Requirements

Ensure the following meta tag is added to the page header to optimize the viewing experience:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Embedding in an iOS App

Here is a sample ViewController code for embedding the AnyClip player correctly in an iOS application using Swift:

//

//  ViewController.swift

//  Watch App

//

//  Created by Tal Peleg on 5/22/24.

//

import UIKit

import WebKit

class ViewController: UIViewController {

    private lazy var webView: WKWebView = {

        let configuration = WKWebViewConfiguration()

        configuration.allowsInlineMediaPlayback = true

        let v = WKWebView(frame: .zero, configuration: configuration)

        return v

      }()

    

    override func viewDidLoad() {

        super.viewDidLoad()

        view.addSubview(webView)

        

        guard let url = URL(string:"https://enterprise.anyclip.com/usopen/testpage.html") else {

            return

        }

        webView.load(URLRequest(url:url))

    }

    

    override func viewDidLayoutSubviews() {

        super.viewDidLayoutSubviews()

        webView.frame = view.bounds

    }

}

For handling potential playback issues when users exit full-screen mode, please refer to this article.

For handling issues with "Share" function, please refer to this article.

Embedding in an Android App

Here is a sample code for embedding the AnyClip player inside a WebView correctly in an Android application using Kotlin:

Custom WebChromeClient:

import android.content.pm.ActivityInfo
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.view.View
import android.webkit.WebChromeClient
import android.widget.FrameLayout
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsCompat
import androidx.core.view.WindowInsetsControllerCompat



class ChromeClient(private val activity: AppCompatActivity) : WebChromeClient() {
   private var mCustomView: View? = null
   private var mCustomViewCallback: CustomViewCallback? = null



   override fun getDefaultVideoPoster(): Bitmap? {
       return BitmapFactory.decodeResource(activity.resources, R.drawable.logo)
   }



   override fun onHideCustomView() {
       (activity.window.decorView as FrameLayout).removeView(this.mCustomView)
       mCustomViewCallback?.onCustomViewHidden()
       this.mCustomView = null
       this.mCustomViewCallback = null
       showSystemUI()
       activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
   }



   override fun onShowCustomView(
       paramView: View,
       paramCustomViewCallback: CustomViewCallback
   ) {
       this.mCustomView = paramView
       this.mCustomViewCallback = paramCustomViewCallback
       (activity.window.decorView as FrameLayout).addView(
           this.mCustomView,
           FrameLayout.LayoutParams(-1, -1)
       )
       hideSystemUI()
       activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
   }



   private fun hideSystemUI() {
       WindowCompat.setDecorFitsSystemWindows(activity.window, false)
       WindowInsetsControllerCompat(
           activity.window, activity.window.decorView
       ).let { controller ->
           controller.hide(WindowInsetsCompat.Type.systemBars())
           controller.systemBarsBehavior =
               WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
       }
   }



   private fun showSystemUI() {
       WindowCompat.setDecorFitsSystemWindows(activity.window, true)
       WindowInsetsControllerCompat(activity.window, activity.window.decorView).show(
           WindowInsetsCompat.Type.systemBars()
       )
   }
}

Custom WebViewClient:

import android.content.Context
import android.content.Intent
import android.net.Uri
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient


class WebViewClient(private val context: Context) : WebViewClient() {
   companion object {
       private val SUPPORTED_SCHEMES = listOf("http://", "https://")
   }


   override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
       return request?.url?.let {
           if (it.isSchemeSupported) {
               false
           } else {
               val intent = Intent(Intent.ACTION_VIEW, it)
               context.startActivity(intent)
               true
           }
       } ?: false
   }


   private val Uri.isSchemeSupported: Boolean
       get() = SUPPORTED_SCHEMES.any { it == scheme }
}

WebViewFragment:

import android.annotation.SuppressLint
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.CookieManager
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import com.anyclip.sample.databinding.FragmentWatchProductBinding



class WatchProductFragment : Fragment(R.layout.fragment_watch_product) {
   private lateinit var binding: FragmentWatchProductBinding



   override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
   ): View {
       binding = FragmentWatchProductBinding.inflate(inflater, container, false)
       return binding.root
   }



   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
       super.onViewCreated(view, savedInstanceState)
       initWebView()
   }



   @SuppressLint("SetJavaScriptEnabled")
   private fun initWebView() {
       CookieManager.getInstance().setAcceptThirdPartyCookies(binding.watchProductWebView, true)
       binding.watchProductWebView.settings.javaScriptEnabled = true
       binding.watchProductWebView.settings.domStorageEnabled = true
       binding.watchProductWebView.webViewClient = WebViewClient()
       binding.watchProductWebView.webChromeClient =
           ChromeClient(requireActivity() as AppCompatActivity)
       binding.watchProductWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null)
       SettingsManager.resourcesUrl?.let {
           binding.watchProductWebView.loadUrl(it)
       }
   }
}

Steps to Implement

Add the Embed Code to Your HTML:
- Copy the embed code and paste it into your HTML file where you want the AnyClip player to appear.
Update the Page Header:
- Add the viewport meta tag to the <head> section of your HTML document.
Embed in iOS App:
- Use the provided ViewController code to load the HTML page with the AnyClip player in a WebView within your iOS app.
Embed in Android App:
- Implement your custom WebChromeClient in order for fullscreen mode to work properly
- Implement your custom WebViewClient in order to support unsupported url schemes(mailto, whatsapp, etc.)
- Enable third party cookies
- Setup your WebView
- Initialize WebViewClient and WebChromeClient
- Load provided url into WebVIew

Sample Page for Testing

For an example of a page with the implementation, refer to the following URL: Sample Page Test

By following these steps, you can successfully embed the AnyClip player inside a WebView for optimal performance and user experience.