Web Player SDK

How to use Uiza's webSDK

  1. Include css, js into html:

<!-- 1. Include UIZA library. -->
<link href='https://sdk.uiza.io/v5/alpha-20200410/uiza.css' rel='stylesheet'> <!-- route to uiza.css -->
<script src='https://sdk.uiza.io/v5/alpha-20200410/uiza.min.js'></script> <!-- route to uiza.min.js -->

2. The video player will prepend the player into this <div> tag:

<video id='player' data-uiza-provider=hlsjs crossorigin playsinline autoplay muted></video>

3. This code creates an UIZA player:

new Uiza(document.getElementById('player'), {
	iconUrl: 'https://sdk.uiza.io/v5/alpha-20200410/uiza.svg', // route to uiza.svg
	urls: {
		hlsjs: {
			sdk: 'https://sdk.uiza.io/v5/alpha-20200410/player/libs/hls.min-v0.12.4.js', // route to hls.min-v0.12.4.js
		},
	},
	src: 'HLS_LINK', // This may be HLS_LINK or PLAY_BACK_LINK
});

4. Full code example:

<!DOCTYPE html>
<html lang='en' dir='ltr'>

<head>
  <meta charset='utf-8'>
  <title></title>
  <meta name='viewport' content='width=device-width,initial-scale=1'>

  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>

<link href='https://sdk.uiza.io/v5/5.0.0-alpha.20200410/uiza.css' rel='stylesheet'> 
<script src='https://sdk.uiza.io/v5/5.0.0-alpha.20200410/uiza.min.js'></script> 

</head>

<body>
  <video id='player' data-uiza-provider=hlsjs crossorigin playsinline autoplay muted></video>

  <script>
    new Uiza(document.getElementById('player'), {
		iconUrl: 'https://sdk.uiza.io/v5/5.0.0-alpha.20200410/uiza.svg',
		urls: {
			hlsjs: {
				sdk: 'https://sdk.uiza.io/v5/5.0.0-alpha.20200410/player/libs/hls.min-v0.12.4.js', // route to hls.min-v0.12.4.js
			},
		},
		src: 'HLS_LINK',
    });
  </script>

</body>
</html>

Last updated