Category
Categories
Sort By

Guidelines and Solution of top most problems regarding Video Application in Samsung Smart TV

27 / Jun / 2016 by Varun Mishra 0 comments

Introduction

Samsung smart Tv is the smart tv which supports the html web application. This blog gives a brief introduction about how to easily build the video application for Samsung smart tv and the problems that are faced by most of the developers while developing the smart tv video application.

Here I am focusing mainly on the solution of common and mostly occurred problems with smart tv video application.

Prerequisites

In order to develop the application for Samsung smart TV developer are required to have background knowledge about HTML 5, JavaScript and CSS While Angular JS is most effective and must have Samsung Smart TV SDK.

Basic App Creation

    1. Config.xml

      Starting from config is the first file in the Samsung application it contains all the configuration such as (App name, Logos, Resolution, Author’s information,policies etc) it’s a simple XML file which have some pre-define tags all the tags placed inside the <App> tag. For the video application following tags are mainly required.

      I. <fullApp>y</fullApp> App will run in full screen mode.

      II. <type>user</type> Enables the user App feature for testing on a real TV set (Not                    available for emulator).

      III. <movie>y</movie> Optimizes the App behavior for movie playback

    2. index.html

This is the html file which runs first in Samsung smart tv application it contains JS files, CSS files, API’s and Plugins.

<!– Dummy anchor to receive key events–>

<a href='javascript:void(0);' id='anchor'onkeydown='Main.keyDown();'></a>
A.  Common API’s –
<!-- Common widget API -->
<script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Widget.js'></script> 
<script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/TVKeyValue.js'></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>

The TVKey Value is used for accessing and handling the tv RC keys, widget is mainly used to control the navigation of screen and Plugin api is used mainly for handle the screen saver .

B. Plugins –

<!-- Plugin for NetWorkConnection-->
<object id="pluginNetworkConnection" classid="clsid:SAMSUNG-INFOLINK-SEF" 
style="width: 0px; height: 0px; display: none;"></object>

<!-- Plugins For video -->
<object id="pluginPlayer" border=0 classid="clsid:SAMSUNG-INFOLINK-PLAYER"></object> 
<object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW">
</object>
<object id="pluginObjectNNavi" border=0 classid="clsid:SAMSUNG-INFOLINK-NNAV"></object>
<object id="pluginScreen" classid="clsid:SAMSUNG-INFOLINK-SCREEN"></object>

<!-- Plugins for Audio -->
<object id="pluginAudio" border=0 classid="clsid:SAMSUNG-INFOLINK-AUDIO">
</object>

Plugin Player provides access to video playback functions of the TV and it also gets a temporary reference to the TV Middle ware plugin (pluginObjectTVMW) to switch the display to show video from the player plugin, instead of the TV receiver. Without doing this, video playback will not work correctly while pluginScreen help to display the video content to the TV.

Structure of Index.html 
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video App</title>

<!-- include Common widget API here -->
<!-- include plugins here-->

<!-- App code -->
<script language="javascript" type="text/javascript" src="Javascript/Main.js">
</script>

</head>

<body onload="Main.onLoad();" onunload="Main.onUnload();">
<a href='javascript:void(0);' id='anchor' onkeydown='Main.keyDown();'></a>
</body>

</html>
 Example of Main.JS to Control the Player-

var AppAPI = new Common.API.App();
var tvKey = new Common.API.TVKeyValue();
var plugin = document.getElementById("pluginPlayer");
var Main ={ }

Main.onLoad = function(){
alert("Main.onLoad()");
this.enableKeys();
AppAPI.sendReadyEvent();

}

Main.onUnload = function(){
alert("Main.onUnload()");
}

Main.enableKeys = function(){
document.getElementById("anchor").focus();
}

Main.keyDown = function(){
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode){
case tvKey.KEY_PLAY:
alert("PLAY");
plugin.Play(“Your_Video_url”);
break;
default:
alert("Unhandled key");
break;
}
} 

Where Main is the Js file of yours and keyDown is the method of Main.js

There are some major Problem that occurred and must be handled for video application –

Here is the some problems and their solutions –

  1. Must handle the network connection checking if internet is disconnected while playing video, Auto play the video resuming from the same point when the internet is connected.    
    Solution –

    set the callback  OnNetworkDisconnected for network error to the player plugin and get the callback when internet disconnected and for resume time set the call OnCurrentPlayTime for current time.

    plugin.OnNetworkDisconnected='Player.onNetworkDisconnected';
plugin.OnCurrentPlayTime = 'Player.setCurTime';
    //Callback for Network error 
Player.onNetworkDisconnected = function() {
//Periodically check for internet connection
Player.checkNetworkConnection();
};

//Callback for Resume time 
Player.setCurTime = function(time) {
var resumeTime = parseInt(time / 1000);
};

    This method is used for checking the internet connection is available or not using pluginNetworkConnection plugin.

    var checkGetway = function(success) {
var plugin = document.getElementById("pluginNetworkConnection");

plugin.style.display = "block";

plugin.Open('Network', '1.001', 'Network');

var cType = plugin.Execute("GetActiveType");

// cType === 1 : active interface is WIRED - 0 : active interface is

// WIRELESS, -1 -disconnected

var phyConnection = plugin.Execute("CheckPhysicalConnection", cType);

// CheckPhysicalConnection - phyConnection ==0 not connected

showTagLog("cType ", cType);

showTagLog("phyConnection ", phyConnection);

// showDefaultToast("phyConnection " + phyConnection + "cType " + cType);

if (phyConnection == 0) {

showLog("disconnected");

isOnline = false;

success(isOnline);

} else {

isOnline = true;

showLog("Connected");

success(isOnline);

}

plugin.style.display = "none";

};

    This method is used for periodically checking the internet connection and when internet is connected just stop the checking and play the video again.

    Player.checkNetworkConnection = function() {
//showNetworkError

interval = setInterval(function() {

//checkConnection

checkGetway(function(online) {

if (online) {

//hide NetworkError

Player.isNetworkError = false;

clearInterval(interval);

//Now Replay the Video. With resume time you can get // the resume time from Player.setCurTime method for this

} else {

//showNetworkError

}

});

}, 3000);

};

     

  2. If Video is completed you must be able to navigate to the previous screen automatically (In Case the Player screen is not the only screen).
    Solution –     Player plugin provide the OnRenderingComplete callback which indicate the completion of the video so just set the callback to handle this.

    plugin.OnRenderingComplete = 'Player.onRenderingComplete';
Player.onRenderingComplete = function() {
plugin.Stop();
widgetAPI.blockNavigation(event);
window.history.go(-1);
};
  3. After a definite period of time during video playback, the screen saver is appeared so, screen saver must be off before Video playback.

    Solution –

    var PLUGIN = new Common.API.Plugin();
//PLUGIN.setOnScreenSaver();
//PLUGIN.setOnScreenSaver(1200); // user set Time.
PLUGIN.setOffScreenSaver(); // off screen saver
  4. Check the System volume if its mute show the mute volume in your application and if the volume is mute pressing unmute/mute or volume -/+ must release the mute status.

    Solution – Get the Audio plugin and get the current mute status if status is 1 so mute the video player.

    audioplugin = document.getElementById("pluginAudio");
if (Main.getUserMute() == 1) {
Main.setMuteMode();
} else {
Main.noMuteMode();
}
Main.getUserMute = function() {
return audioplugin.GetUserMute();
};

Main.setMuteMode = function() {
audioplugin.SetUserMute(true);
};

Main.noMuteMode = function() {
audioplugin.SetUserMute(false);
};
  5. Player controller automatically hide and show on any RC keys press.
    Solution –

    var clicked = false;
//in Main.onLoad call autoHideController to hide 
var autoHideController = function() {
 if (clicked) {
 resetClock();
 } else {
 startClock();
 }
 };

function startClock() {
 if (clicked === false) {
 // write your code here to show your Controller 
 clock = setInterval("stopWatch()", 1000);
 clicked = true;
 } else if (clicked === true) {
 }
}

function stopWatch() {
 sec++;
 if (sec >= 2) {
 // Write your code to hide your Controller
 stopClock();
 }
}

function stopClock() {
 if (clock) {
 window.clearInterval(clock);
 }
 sec = 0;
 clicked = false;
}

function resetClock() {
 stopClock();
 startClock();
}
  6. Check the network connection before going to play screen. if internet is not available, just show the error not navigate to the play screen.
    Solution –

    checkGetway(function(online) {                                               if (online) { // Go to Player screen
} else {
//show Network Error
// if only screen exit form application or show the dialog to exit .
}

     

  7. Check the network connection of play screen before loading the video. if internet is not available, navigate to the previous screen.
    Solution –

    checkGetway(function(online) {
if (online) {
// Initlize the player plugin
} else {
// Go back to previous screen if available .
window.history.go(-1);
}
  8. Show the Loading display to avoid the black screen of player while preparing.  
    Solution –
    Make your Element how your application required or how you want to design and make the id of that tag like loadingImage.In the Starting call the method to show the loading Main.showLoadingDialog();To hide the loading add the callback to the player plugin for OnStreamInfoReady to get the call back and hide the loading.  

    plugin.OnStreamInfoReady = 'Player.setTotalTime';
Player.setTotalTime = function() {
if (this.startCallback) {
this.startCallback();
}
Player.startCallback = function() {
Main.hideLoadingDialog();
}
};
Main.showLoadingDialog = function() {
var elementLoadingImage = document.getElementById("loadingImage");
elementLoadingImage.style.display = 'block';
};
Main.hideLoadingDialog = function() {
var elementLoadingImage = document.getElementById("loadingImage");
elementLoadingImage.style.display = 'none';
};
  9.  Show the buffering display, while the Video is buffering. Handling of Network Error if occurs.
    Solution –     For showing the Buffering dialog need to add few callback to the player plugin

    plugin.OnBufferingStart = 'Player.onBufferingStart';
plugin.OnBufferingProgress = 'Player.onBufferingProgress';
plugin.OnBufferingComplete = 'Player.onBufferingComplete';
plugin.OnNetworkDisconnected='Player.onNetworkDisconnected';
Player.onBufferingStart = function() {
// showBuffering
};
Player.onBufferingProgress = function(percent) {
// show "Buffering percent
};
Player.onBufferingComplete = function() {
// hideBuffering
};
Player.onNetworkDisconnected = function()
// Show Network Error!
};
  10. Problem to Play the HSL (.m3u8) Videos.
    Solution –

Change the .m3u8 url by adding the “|COMPONENT=HLS” to the end of Url to make it playable in samsung smart tv.

var getModifyUrl = function(url)
{ 
var newurl = url; 
if (newurl.indexOf('m3u8') >= 0) 
{  
newurl = newurl + "|COMPONENT=HLS";
} 
return newurl;
};

Conclusion

Using the above solutions suggested for common challenges faced, will ease your development to achieve the complete functionality with good quality.

FOUND THIS USEFUL? SHARE IT

Tag -

HLS Video Formats Compatibility for Samsung smart tv Plying m3u8 formats in Samsung smart tv Samsung Smart Tv

Leave a Reply

Your email address will not be published. Required fields are marked *

YOU MAY ALSO LIKE

  1. Building Samsung Smart TV Application
  2. Samsung Smart TV (2014 Series) Apps Testing
  3. Using Custom Tag for embedding the Video in Grails
Glassdoor
Services