ParOne Video Player

The steps below will integrate ParOne into your existing stack in minutes.

HTML

Add <script> Tag

Include the ParOne SDK script tag in your website’s <head> section.

<head>
    <script src="https://sdk.parone.io/parone.min.js"></script>
</head>

Insert <parone> Tag
Insert the ParOne video player tag into your site’s <body> section. Replace YOUR_FEED_ID with your FeedID, and the CONTENT_KEY with a content-key from feed.
```
<body>
    <parone-video-block content-key="CONTENT_KEY" feed="YOUR_FEED_ID">
</body>
```
Note
- For more ParOne player configuration options, visit ParOne Player Configuration.
- For information of customizing the style, visit Styling.

iOS

Instantiate a WkWebView object and load our script tag and the single Video Block.

Replace YOUR_FEED_ID with your Feed ID, and the CONTENT_KEY with a content-key from the JSON or RSS feed.

YOUR_URL_HERE should be the same URL for your domain associated with your Ad server to ensure ads play correctly.

class ViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.allowsAirPlayForMediaPlayback = true
        webConfiguration.mediaTypesRequiringUserActionForPlayback = .audio
        webConfiguration.allowsInlineMediaPlayback = true
        webConfiguration.allowsPictureInPictureMediaPlayback = true
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.loadHTMLString("
        <html>
        <head>
          <script src='https://sdk.parone.io/parone.min.js'></script>
          <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'></meta>
        </head>
        <body>This is a video test<br>
          <parone-video-block
            feed='YOUR_FEED_ID' 
            content-key='CONTENT_KEY'>
          </parone-video-block>
        </html>",
        baseURL: URL(string: "YOUR_URL_HERE"))
    }
}

Additional Settings

In addition, you should add the Audio, AirPlay and Picture in Picture capabilties in your Background modes. Apple’s documentation has more information with adding this feature.

For capturing fullscreen events, see WebView Events has more information with adding this feature.

Android

use a WebView and load our <script> and the desired <HTML> tags.

Below is an example fragment.

private const val arg_id = "id"
private const val arg_feed = "feed"

class SingleBlockFragment : Fragment() {
  private var contentKey: String = ""
  private var feed: String = "Unknown"

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    arguments?.let {
      contentKey = it.getInt(arg_id)
      feed = it.getString(arg_feed) ?: "Unknown"
    }
  }

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val html = """
      <script src='parone.min.js'></script>
      <parone-video-block content-key='$this.contentKey' feed='$this.feed'/>
    """
    val webView = view.findViewById<WebView>(R.id.webview).apply {
      settings.javaScriptEnabled = true
      settings.domStorageEnabled = true
      webChromeClient = WebChromeClient()
      webViewClient = WebViewClient()
    }
    webView.loadDataWithBaseURL(
      "https://sdk.parone.io", html,
      "text/html; charset=UTF-8",
      "UTF-8", ""
    )
  }

  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment_single_block, container, false)
  }

  companion object {
    @JvmStatic
    fun newInstance(id: Int = 0, feed: String? = null) =
      SingleBlockFragment().apply {
        arguments = Bundle().apply {
            putInt(arg_id, id)
            putString(arg_feed, feed)
        }
      }
  }
}

Change Orientation
To support changing orientation, add the following to your AndroidManifest.xml in the activity tag:
```
android:configChanges="orientation|keyboardHidden|screenSize"
```

Allowing Fullscreen

To support fullscreen, see example code below.

Fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mainview"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/webview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        </WebView>
    </FrameLayout>
    <FrameLayout
    android:id="@+id/targetview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone">
    </FrameLayout>
</FrameLayout>

Extend the above Kotlin example like so:

private const val arg_id = "id"
private const val arg_feed = "feed"

class SingleBlockFragment : Fragment() {
  private var contentKey: String = ""
  private var feed: String = "Unknown"
  private var targetView: FrameLayout? = null
  private var contentView: FrameLayout? = null
  private var customView: View? = null

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    arguments?.let {
      contentKey = it.getInt(arg_id)
      feed = it.getString(arg_feed) ?: "Unknown"
    }
  }

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    contentView = view.findViewById(R.id.mainview);
    targetView = view.findViewById(R.id.targetview);
    val html = """
        <script src='parone.min.js'></script>
        <parone-video-block content-key='$this.contentKey' feed='$this.feed'/>
    """
    val webView = view.findViewById<WebView>(R.id.webview).apply {
      settings.javaScriptEnabled = true
      settings.domStorageEnabled = true
      webChromeClient = object: WebChromeClient() {
        override fun onShowCustomView(view: View, callback: CustomViewCallback) {
            targetView?.addView(view)
            customView = view
            contentView?.setVisibility(View.GONE)
            targetView?.setVisibility(View.VISIBLE)
            targetView?.bringToFront()
        }

        override fun onHideCustomView() {
          customView?.setVisibility(View.GONE)
          targetView?.removeView(customView)
          customView = null
          targetView?.setVisibility(View.GONE)
          contentView?.setVisibility(View.VISIBLE)
        }
      }
      webViewClient = WebViewClient()
    }
    webView.loadDataWithBaseURL(
      "https://sdk.parone.io", html,
      "text/html; charset=UTF-8",
      "UTF-8", ""
    )
  }

  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment_single_block, container, false)
  }

  companion object {
    @JvmStatic
    fun newInstance(id: Int = 0, feed: String? = null) =
      SingleBlockFragment().apply {
        arguments = Bundle().apply {
            putInt(arg_id, id)
            putString(arg_feed, feed)
        }
      }
  }
}

Wordpress

Install the zip file from the “Install Plugin” page of your WordPress admin console.
Download the Latest ParOne Wordpress Plugin Download and install our WordPress plugin from the official Wordpress.org Website.
Insert <parone> Tag
Insert the ParOne video player tag into your site’s <body> section. Replace YOUR_FEED_ID with your FeedID, and the CONTENT_KEY with a content-key from feed.
```
<body>
    <parone-video-block content-key="CONTENT_KEY" feed="YOUR_FEED_ID">
</body>
```
Note
- For more ParOne player configuration options, visit ParOne Player Configuration.
- For information of customizing the style, visit Styling.
Go to WordPress admin and navigate to ParOne Feeds -> Video Library.
Enter your Organization Key from Settings -> Organization
Click “Get Feeds”