{"id":35849,"date":"2016-06-27T15:13:12","date_gmt":"2016-06-27T09:43:12","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=35849"},"modified":"2016-06-27T15:31:13","modified_gmt":"2016-06-27T10:01:13","slug":"guidelines-and-solution-of-top-most-problems-regarding-video-application-in-samsung-smart-tv","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/guidelines-and-solution-of-top-most-problems-regarding-video-application-in-samsung-smart-tv\/","title":{"rendered":"Guidelines and Solution of top most problems regarding Video Application in Samsung Smart TV"},"content":{"rendered":"

Introduction<\/h2>\n

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<\/a> for Samsung smart tv and the problems that are faced by most of the developers<\/a> while developing the smart tv<\/a> video application.<\/p>\n

Here I am focusing mainly on the solution of common and mostly occurred problems with smart tv video application.<\/em><\/p>\n

Prerequisites<\/b><\/span><\/span><\/p>\n

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<\/em> <\/strong>is most effective and must have Samsung Smart TV SDK<\/em><\/strong>.<\/p>\n

Basic App Creation<\/h3>\n
    \n
      \n
    1. \n

      Config.xml<\/h4>\n

      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.<\/p>\n

      I.\u00a0<\/strong><fullApp>y<\/fullApp> App will run in full screen mode.<\/p><\/blockquote>\n

      II.\u00a0<\/strong><type>user<\/type> Enables the user App feature for testing on a real TV set (Not \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0available for emulator).<\/p><\/blockquote>\n

      III.\u00a0<\/strong><movie>y<\/movie> Optimizes the App behavior for movie playback<\/p><\/blockquote>\n<\/li>\n

    2. \n

      index.html<\/h4>\n<\/li>\n<\/ol>\n<\/ol>\n

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

      <!– Dummy anchor to receive key events–><\/p>\n

      <a href='javascript:void(0);' id='anchor'onkeydown='Main.keyDown();'><\/a><\/span><\/pre>\n
      A.\u00a0<\/em>\u00a0Common API’s –<\/strong><\/h5>\n
      <!-- Common widget API --><\/span><\/span>\r\n<script type='text\/javascript' language='javascript' src='$MANAGER_WIDGET\/Common\/API\/Widget.js'><\/script> \r\n<script type='text\/javascript' language='javascript' src='$MANAGER_WIDGET\/Common\/API\/TVKeyValue.js'><\/script>\r\n<script type=\"text\/javascript\" language=\"javascript\" src=\"$MANAGER_WIDGET\/Common\/API\/Plugin.js\"><\/script> \r\n<\/span><\/pre>\n
      The TVKey Value is used for accessing and handling the tv RC keys, widget is mainly used to control the navigation of screen and\u00a0Plugin api is used mainly for handle the screen saver .<\/p>\n
      B. Plugins –<\/strong><\/p>\n
      <!-- Plugin for NetWorkConnection--><\/span>\r\n<object id=\"pluginNetworkConnection\" classid=\"clsid:SAMSUNG-INFOLINK-SEF\" <\/span>\r\nstyle=\"width: 0px; height: 0px; display: none;\"><\/object><\/span>\r\n\r\n<!-- Plugins For video --><\/span>\r\n<object id=\"pluginPlayer\" border=0 classid=\"clsid:SAMSUNG-INFOLINK-PLAYER\"><\/object> <\/span>\r\n<object id=\"pluginObjectTVMW\" border=0 classid=\"clsid:SAMSUNG-INFOLINK-TVMW\">\r\n<\/object><\/span>\r\n<object id=\"pluginObjectNNavi\" border=0 classid=\"clsid:SAMSUNG-INFOLINK-NNAV\"><\/object><\/span>\r\n<object id=\"pluginScreen\" classid=\"clsid:SAMSUNG-INFOLINK-SCREEN\"><\/object><\/span>\r\n\r\n<!-- Plugins for Audio --><\/span>\r\n<object id=\"pluginAudio\" border=0 classid=\"clsid:SAMSUNG-INFOLINK-AUDIO\"><\/span>\r\n<\/object><\/span> \r\n\r\n<\/pre>\n
      Plugin Player<\/em> provides access to video playback functions of the TV and it also gets a temporary reference to the TV Middle ware plugin (pluginObjectTVMW<\/span><\/em>) 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<\/em> help to display the video content to the TV.<\/p>\n
      Structure of Index.html <\/span>\r\n<!DOCTYPE html><\/span>\r\n<html><\/span>\r\n\r\n<head><\/span>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"><\/span>\r\n<title>Video App<\/title><\/span>\r\n\r\n<!-- include Common widget API here --><\/span>\r\n<!-- include plugins here-->\r\n<\/span>\r\n<!-- App code --><\/span>\r\n<script language=\"javascript\" type=\"text\/javascript\" src=\"Javascript\/Main.js\"><\/span>\r\n<\/script><\/span>\r\n\r\n<\/head><\/span>\r\n\r\n<body onload=\"Main.onLoad();\" onunload=\"Main.onUnload();\"><\/span>\r\n<a href='javascript:void(0);' id='anchor' onkeydown='Main.keyDown();'><\/a><\/span>\r\n<\/body><\/span>\r\n\r\n<\/html><\/span><\/pre>\n
       Example of Main.JS to Control the Player-<\/span>\r\n\r\nvar AppAPI = new Common.API.App();<\/span>\r\nvar tvKey = new Common.API.TVKeyValue();<\/span>\r\nvar plugin = document.getElementById(\"pluginPlayer\");<\/span>\r\nvar Main ={ }<\/span>\r\n\r\nMain.onLoad = function(){<\/span>\r\nalert(\"Main.onLoad()\");<\/span>\r\nthis.enableKeys();<\/span>\r\nAppAPI.sendReadyEvent();<\/span>\r\n\r\n}<\/span>\r\n\r\nMain.onUnload = function(){<\/span>\r\nalert(\"Main.onUnload()\");<\/span>\r\n}<\/span>\r\n\r\nMain.enableKeys = function(){<\/span>\r\ndocument.getElementById(\"anchor\").focus();<\/span>\r\n}<\/span>\r\n\r\nMain.keyDown = function(){<\/span>\r\nvar keyCode = event.keyCode;<\/span>\r\nalert(\"Key pressed: \" + keyCode);<\/span>\r\nswitch(keyCode){<\/span>\r\ncase tvKey.KEY_PLAY:<\/span>\r\nalert(\"PLAY\");<\/span>\r\nplugin.Play(\u201cYour_Video_url\u201d);<\/span>\r\nbreak;<\/span>\r\ndefault:<\/span>\r\nalert(\"Unhandled key\");<\/span>\r\nbreak;<\/span>\r\n}<\/span>\r\n}\u00a0<\/span>\r\n\r\nWhere Main is the Js file of yours and keyDown is the method of Main.js<\/span><\/pre>\n
      There are some major Problem that occurred and must be handled for video application –<\/strong><\/p>\n
      Here is the some problems and their solutions –<\/p>\n
        \n
      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. \u00a0 \u00a0 <\/strong>
        \nSolution –<\/strong><\/p>\n
        set the callback \u00a0OnNetworkDisconnected for network error to the player plugin and get the callback when internet disconnected and for resume time set\u00a0the call OnCurrentPlayTime for current time.<\/p>\n
        plugin.OnNetworkDisconnected='Player.onNetworkDisconnected';<\/span>\r\nplugin.OnCurrentPlayTime = 'Player.setCurTime';<\/span><\/pre>\n
        \/\/Callback for Network error \r\nPlayer.onNetworkDisconnected = function() {<\/span>\r\n\/\/Periodically check for internet connection<\/span>\r\nPlayer.checkNetworkConnection();<\/span>\r\n};\r\n\r\n\/\/Callback for Resume time \r\nPlayer.setCurTime = function(time) {\r\nvar resumeTime = parseInt(time \/ 1000);<\/span>\r\n};<\/span><\/pre>\n
        This method is used for checking the internet connection is available or not using pluginNetworkConnection plugin.<\/p>\n
        var checkGetway = function(success) {<\/span>\r\nvar plugin = document.getElementById(\"pluginNetworkConnection\");<\/span>\r\n\r\nplugin.style.display = \"block\";<\/span>\r\n\r\nplugin.Open('Network', '1.001', 'Network');<\/span>\r\n\r\nvar cType = plugin.Execute(\"GetActiveType\");<\/span>\r\n\r\n\/\/ cType === 1 : active interface is WIRED - 0 : active interface is<\/span>\r\n\r\n\/\/ WIRELESS, -1 -disconnected<\/span>\r\n\r\nvar phyConnection = plugin.Execute(\"CheckPhysicalConnection\", cType);<\/span>\r\n\r\n\/\/ CheckPhysicalConnection - phyConnection ==0 not connected<\/span>\r\n\r\nshowTagLog(\"cType \", cType);<\/span>\r\n\r\nshowTagLog(\"phyConnection \", phyConnection);<\/span>\r\n\r\n\/\/ showDefaultToast(\"phyConnection \" + phyConnection + \"cType \" + cType);<\/span>\r\n\r\nif (phyConnection == 0) {<\/span>\r\n\r\nshowLog(\"disconnected\");<\/span>\r\n\r\nisOnline = false;<\/span>\r\n\r\nsuccess(isOnline);<\/span>\r\n\r\n} else {<\/span>\r\n\r\nisOnline = true;<\/span>\r\n\r\nshowLog(\"Connected\");<\/span>\r\n\r\nsuccess(isOnline);<\/span>\r\n\r\n}<\/span>\r\n\r\nplugin.style.display = \"none\";<\/span>\r\n\r\n};<\/span>\r\n<\/pre>\n
        This method is used for periodically checking the internet connection and when internet is connected just stop the checking and play the video again.<\/p>\n
        Player.checkNetworkConnection = function() {<\/span>\r\n\/\/showNetworkError<\/span>\r\n\r\ninterval = setInterval(function() {<\/span>\r\n\r\n\/\/checkConnection<\/span>\r\n\r\ncheckGetway(function(online) {<\/span>\r\n\r\nif (online) {<\/span>\r\n\r\n\/\/hide NetworkError<\/span>\r\n\r\nPlayer.isNetworkError = false;<\/span>\r\n\r\nclearInterval(interval);<\/span>\r\n\r\n\/\/Now Replay the Video. With resume time you can get \/\/ the resume time from Player.setCurTime method for this<\/span>\r\n\r\n} else {<\/span>\r\n\r\n\/\/showNetworkError<\/span>\r\n\r\n}<\/span>\r\n\r\n});<\/span>\r\n\r\n}, 3000);<\/span>\r\n\r\n};<\/span><\/pre>\n
         <\/li>\n
      2. If Video is completed you must be able to\u00a0navigate to the previous screen automatically (In Case the Player screen is not the only screen).<\/strong><\/strong>
        \nSolution –\u00a0<\/strong><\/strong>Player plugin provide the OnRenderingComplete callback which indicate the completion of the video so just set the callback to handle this.<\/p>\n
        plugin.OnRenderingComplete = 'Player.onRenderingComplete';<\/span>\r\nPlayer.onRenderingComplete = function() {\r\nplugin.Stop();\r\nwidgetAPI.blockNavigation(event);\r\nwindow.history.go(-1);\r\n};\r\n<\/span><\/pre>\n<\/li>\n
      3. After a definite period of time during video playback, the screen saver is appeared so, screen saver must be off before Video playback.
        \n<\/strong><\/strong><\/strong>
        \nSolution –<\/strong><\/p>\n
        var PLUGIN = new Common.API.Plugin();\r\n\/\/PLUGIN.setOnScreenSaver();\r\n\/\/PLUGIN.setOnScreenSaver(1200); \/\/ user set Time.\r\nPLUGIN.setOffScreenSaver(); \/\/ off screen saver<\/span><\/pre>\n<\/li>\n
      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.<\/strong>
        \n
        \nSolution –\u00a0Get the Audio plugin and get the current mute status if status is 1 so mute the video player.<\/strong><\/strong><\/p>\n
        audioplugin = document.getElementById(\"pluginAudio\");\r\nif (Main.getUserMute() == 1) {\r\nMain.setMuteMode();\r\n} else {\r\nMain.noMuteMode();\r\n}\r\nMain.getUserMute = function() {\r\nreturn audioplugin.GetUserMute();\r\n};\r\n\r\nMain.setMuteMode = function() {\r\naudioplugin.SetUserMute(true);\r\n};\r\n\r\nMain.noMuteMode = function() {\r\naudioplugin.SetUserMute(false);\r\n};<\/span><\/pre>\n<\/li>\n
      5. Player controller automatically hide and show on any RC keys press.
        \nSolution –<\/strong><\/strong><\/p>\n
        var clicked = false;<\/span>\r\n\/\/in Main.onLoad call autoHideController to hide<\/span> \r\nvar autoHideController = function() {<\/span>\r\n if (clicked) {<\/span>\r\n resetClock();<\/span>\r\n } else {<\/span>\r\n startClock();<\/span>\r\n }<\/span>\r\n };<\/span>\r\n\r\nfunction startClock() {<\/span>\r\n if (clicked === false) {<\/span>\r\n \/\/ write your code here to show your Controller <\/span>\r\n clock = setInterval(\"stopWatch()\", 1000);<\/span>\r\n clicked = true;<\/span>\r\n } else if (clicked === true) {<\/span>\r\n }<\/span>\r\n}<\/span>\r\n\r\nfunction stopWatch() {<\/span>\r\n sec++;<\/span>\r\n if (sec >= 2) {<\/span>\r\n \/\/ Write your code to hide your Controller<\/span>\r\n stopClock();<\/span>\r\n }<\/span>\r\n}<\/span>\r\n\r\nfunction stopClock() {<\/span>\r\n if (clock) {<\/span>\r\n window.clearInterval(clock);<\/span>\r\n }<\/span>\r\n sec = 0;<\/span>\r\n clicked = false;<\/span>\r\n}<\/span>\r\n\r\nfunction resetClock() {<\/span>\r\n stopClock();<\/span>\r\n startClock();<\/span>\r\n}<\/span><\/pre>\n<\/li>\n
      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.
        \nSolution –<\/strong><\/p>\n
        checkGetway(function(online) {                                               if (online) { \/\/ Go to Player screen<\/span>\r\n} else {<\/span>\r\n\/\/show Network Error<\/span>\r\n\/\/ if only screen exit form application or show the dialog to exit .<\/span>\r\n}<\/span><\/pre>\n
         <\/li>\n
      7. Check the network connection of play screen before loading the video. if internet is not available, navigate to the previous screen.
        \nSolution –<\/strong><\/p>\n
        checkGetway(function(online) {\r\nif (online) {\r\n\/\/ Initlize the player plugin\r\n} else {\r\n\/\/ Go back to previous screen if available .\r\nwindow.history.go(-1);\r\n}<\/span><\/pre>\n<\/li>\n
      8. Show the Loading display to avoid the black screen of player while\u00a0preparing. \u00a0<\/strong><\/strong>
        \nSolution –<\/strong>
        \nMake 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. \u00a0<\/strong><\/span><\/p>\n
        plugin.OnStreamInfoReady = 'Player.setTotalTime';\r\nPlayer.setTotalTime = function() {\r\nif (this.startCallback) {\r\nthis.startCallback();\r\n}\r\nPlayer.startCallback = function() {\r\nMain.hideLoadingDialog();\r\n}\r\n};\r\nMain.showLoadingDialog = function() {\r\nvar elementLoadingImage = document.getElementById(\"loadingImage\");\r\nelementLoadingImage.style.display = 'block';\r\n};\r\nMain.hideLoadingDialog = function() {\r\nvar elementLoadingImage = document.getElementById(\"loadingImage\");\r\nelementLoadingImage.style.display = 'none';\r\n};<\/span><\/pre>\n<\/li>\n
      9. \u00a0Show the buffering display, while the Video is buffering. Handling of Network Error if occurs.
        \nSolution –\u00a0<\/strong>For showing the Buffering dialog need to add few callback to the player plugin<\/p>\n
        plugin.OnBufferingStart = 'Player.onBufferingStart';\r\nplugin.OnBufferingProgress = 'Player.onBufferingProgress';\r\nplugin.OnBufferingComplete = 'Player.onBufferingComplete';\r\nplugin.OnNetworkDisconnected='Player.onNetworkDisconnected';<\/span>\r\nPlayer.onBufferingStart = function() {\r\n\/\/ showBuffering\r\n};\r\nPlayer.onBufferingProgress = function(percent) {\r\n\/\/ show \"Buffering percent\r\n};\r\nPlayer.onBufferingComplete = function() {\r\n\/\/ hideBuffering\r\n};\r\nPlayer.onNetworkDisconnected = function()\r\n\/\/ Show Network Error!<\/span>\r\n};<\/span><\/pre>\n<\/li>\n
      10. Problem to Play the HSL (.m3u8) Videos.
        \nSolution –<\/strong><\/li>\n<\/ol>\n
        Change the .m3u8 url by adding the “|COMPONENT=HLS” to the end of Url to make it playable in samsung smart tv.<\/span><\/p>\n
        var getModifyUrl = function(url)\r\n{ \r\nvar newurl = url; \r\nif (newurl.indexOf('m3u8') >= 0) \r\n{  \r\nnewurl = newurl + \"|COMPONENT=HLS\";\r\n} \r\nreturn newurl;\r\n};<\/span><\/strong><\/pre>\n
        Conclusion<\/h2>\n
        Using the above solutions suggested for common challenges faced, will ease your development to achieve the complete functionality with good quality.<\/p>\n","protected":false},"excerpt":{"rendered":"
        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 […]<\/p>\n","protected":false},"author":864,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":11},"categories":[3477,1],"tags":[3520,3521,3519],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/35849"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/864"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=35849"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/35849\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=35849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=35849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=35849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}