# 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 -->
```

&#x20;2\. The video player will prepend the player into this \<div> tag:

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

&#x20;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>
```
