Copy <!-- 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:
Copy <video id='player' data-uiza-provider=hlsjs crossorigin playsinline autoplay muted></video> 3. This code creates an UIZA player:
Copy 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:
Copy <!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> 