How To Use

Samsung Tizen

This is demo project for Samsung Tizen: demo

     VOD sample

The sample HTML page below creates an player that will load a entity VOD

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Include Tizen library: webapis -->
    <script type='application/javascript' src='$WEBAPIS/webapis/webapis.js'></script>
    <!-- 2. UIZA library -->
    <script type='application/javascript' src="https://sdk.uiza.io/sdk-smart-tv-html5/uizaplayer.js"></script>
  </head>
  <body>
    <!-- 3. The Uiza SDK will prepend the player into this tag. You should create css style for this tag -->
    <div id='playerVOD' class='player'>
      <!-- 4. You can add cutom UI into here -->
      <div class='controls'>
        <!-- some html tag of UI  -->
      </div>
    </div>

    <script type='application/javascript'>
      (function() {
        window.playerVOD = new UZPlayer('#playerVOD', {
          api: btoa('YOUR_API_DOMAIN'),
          appId: 'YOU_APP_ID'
        });

        playerVOD.initVOD('YOUR_ENTITY_ID', function(player) {
          window.console.log('playerVOD on ready: ', player);
        });

        playerVOD.onCurrentTime(function(currentTime){
          console.log('onCurrentTime: ' + currentTime + ' / ' + playerVOD.getDuration());
        });
        playerVOD.onEnded(function(){
          console.log('onEnded');
        });
        playerVOD.onError(function(){
          console.log('onError');
        });
        playerVOD.onFullscreen(function(fullscreen){
          console.log('onFullscreen: ', fullscreen);
        });
        playerVOD.onLoad(function(){
          console.log('onLoad');
        });
        playerVOD.onPause(function(){
          console.log('onPause');
        });
        playerVOD.onPlay(function(){
          console.log('onPlay');
        });
        playerVOD.onWaiting(function(){
          console.log('onWaiting');
        });
        playerVOD.onPlaybackState(function(playbackState){
          console.log('onPlaybackState: ', playbackState);
        });
        playerVOD.onVolume(function(volume){
          console.log('onVolume: ', volume);
        });

        // You should handle keyboard/remote kere
        window.addEventListener('keydown', function(evt) {
          window.console.log('keydown: ', evt);
          // do something
        });
      })();
    </script>
  </body>
</html>

     Live sample

The sample HTML page below creates an player that will load a entity live

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Include Tizen library: webapis -->
    <script type='application/javascript' src='$WEBAPIS/webapis/webapis.js'></script>
    <!-- 2. UIZA library -->
    <script type='application/javascript' src="https://sdk.uiza.io/sdk-smart-tv-html5/uizaplayer.js"></script>
  </head>
  <body>
    <!-- 3. The Uiza SDK will prepend the player into this tag. You should create css style for this tag -->
    <div id='playerLive' class='player'>
      <!-- 4. You can add cutom UI into here -->
      <div class='controls'>
        <!-- some html tag of UI  -->
      </div>
    </div>

    <script type='application/javascript'>
      (function() {
        window.playerLive = new UZPlayer('#playerLive', {
          api: btoa('YOUR_API_DOMAIN'),
          appId: 'YOU_APP_ID'
        });

        playerLive.initLive('YOUR_ENTITY_ID',
          'YOUR_STREAM_NAME',
          'YOUR_REGION',
          function(player) {
            window.console.log('playerLive on ready: ', player);
        });

        playerLive.onCurrentTime(function(currentTime){
          console.log('onCurrentTime: ' + currentTime);
        });
        playerLive.onEnded(function(){
          console.log('onEnded');
        });
        playerLive.onError(function(){
          console.log('onError');
        });
        playerLive.onFullscreen(function(fullscreen){
          console.log('onFullscreen: ', fullscreen);
        });
        playerLive.onLoad(function(){
          console.log('onLoad');
        });
        playerLive.onWaiting(function(){
          console.log('onWaiting');
        });
        playerLive.onPlaybackState(function(playbackState){
          console.log('onPlaybackState: ', playbackState);
        });
        playerLive.onVolume(function(volume){
          console.log('onVolume: ', volume);
        });

        // You should handle keyboard/remote kere
        window.addEventListener('keydown', function(evt) {
          window.console.log('keydown: ', evt);
          // do something
        });
      })();
    </script>
  </body>
</html>

LG webOS

This is demo project for LG webOS: demo

     VOD sample

The sample HTML page below creates an player that will load a entity VOD

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Include webOS library: webapis -->
    <script type='application/javascript' src='./webOSTVjs-1.0.0/webOSTV.js'></script>
    <!-- 2. UIZA library -->
    <script type='application/javascript' src="https://sdk.uiza.io/sdk-smart-tv-html5/uizaplayer.js"></script>
  </head>
  <body>
    <!-- 3. The Uiza SDK will prepend the player into this tag. You should create css style for this tag -->
    <div id='playerVOD' class='player'>
      <!-- 4. You can add cutom UI into here -->
      <div class='controls'>
        <!-- some html tag of UI  -->
      </div>
    </div>

    <script type='application/javascript'>
      (function() {
        window.playerVOD = new UZPlayer('#playerVOD', {
          api: btoa('YOUR_API_DOMAIN'),
          appId: 'YOU_APP_ID'
        });

        playerVOD.initVOD('YOUR_ENTITY_ID', function(player) {
          window.console.log('playerVOD on ready: ', player);
        });

        playerVOD.onCurrentTime(function(currentTime){
          console.log('onCurrentTime: ' + currentTime + ' / ' + playerVOD.getDuration());
        });
        playerVOD.onEnded(function(){
          console.log('onEnded');
        });
        playerVOD.onError(function(){
          console.log('onError');
        });
        playerVOD.onFullscreen(function(fullscreen){
          console.log('onFullscreen: ', fullscreen);
        });
        playerVOD.onLoad(function(){
          console.log('onLoad');
        });
        playerVOD.onPause(function(){
          console.log('onPause');
        });
        playerVOD.onPlay(function(){
          console.log('onPlay');
        });
        playerVOD.onWaiting(function(){
          console.log('onWaiting');
        });
        playerVOD.onPlaybackState(function(playbackState){
          console.log('onPlaybackState: ', playbackState);
        });
        playerVOD.onVolume(function(volume){
          console.log('onVolume: ', volume);
        });

        // You should handle keyboard/remote kere
        window.addEventListener('keydown', function(evt) {
          window.console.log('keydown: ', evt);
          // do something
        });
      })();
    </script>
  </body>
</html>

     Live sample

The sample HTML page below creates an player that will load a entity live


<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Include webOS library: webapis -->
    <script type='application/javascript' src='./webOSTVjs-1.0.0/webOSTV.js'></script>
    <!-- 2. UIZA library -->
    <script type='application/javascript' src="https://sdk.uiza.io/sdk-smart-tv-html5/uizaplayer.js"></script>
  </head>
  <body>
    <!-- 3. The Uiza SDK will prepend the player into this tag. You should create css style for this tag -->
    <div id='playerLive' class='player'>
      <!-- 4. You can add cutom UI into here -->
      <div class='controls'>
        <!-- some html tag of UI  -->
      </div>
    </div>

    <script type='application/javascript'>
      (function() {
        window.playerLive = new UZPlayer('#playerLive', {
          api: btoa('YOUR_API_DOMAIN'),
          appId: 'YOU_APP_ID'
        });

        playerLive.initLive('YOUR_ENTITY_ID',
          'YOUR_STREAM_NAME',
          'YOUR_REGION',
          function(player) {
            window.console.log('playerLive on ready: ', player);
        });

        playerLive.onCurrentTime(function(currentTime){
          console.log('onCurrentTime: ' + currentTime);
        });
        playerLive.onEnded(function(){
          console.log('onEnded');
        });
        playerLive.onError(function(){
          console.log('onError');
        });
        playerLive.onFullscreen(function(fullscreen){
          console.log('onFullscreen: ', fullscreen);
        });
        playerLive.onLoad(function(){
          console.log('onLoad');
        });
        playerLive.onWaiting(function(){
          console.log('onWaiting');
        });
        playerLive.onPlaybackState(function(playbackState){
          console.log('onPlaybackState: ', playbackState);
        });
        playerLive.onVolume(function(volume){
          console.log('onVolume: ', volume);
        });

        // You should handle keyboard/remote kere
        window.addEventListener('keydown', function(evt) {
          window.console.log('keydown: ', evt);
          // do something
        });
      })();
    </script>
  </body>
</html>

Reference

Configuration

Supported Devices