I am currently developing an samsung smart tv app using the sdk 3.5.2 (as required)
I am using the SEF plugin and with setDisplayArea()
, I am able to display a full screen video.
But now I am facing problem that I would like to overlay 2 divs, a header and a footer, on top of the video, but I could not have it done correctly.
What have I tried and got is desribed as follow:
In my html, I have include the plugin, and got the player object z-index and position set
<object id="pluginPlayer" border=0 classid="clsid:SAMSUNG-INFOLINK-PLAYER"
style="position:absolute;z-index:10;left:0px;top:0px;width:1280px;height:720px;"></object>
<object id="pluginAudio" border=0 classid="clsid:SAMSUNG-INFOLINK-AUDIO"></object>
<object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>
In my css, I have set the z-index of the header div
#SplashHeader{
position: absolute;
top:0px;
left:0px;
height:40px;
width: 1280px;
background: grey;
z-index: 100;
}
In my Js, I have called the setdisplayarea()
this.plugin.SetDisplayArea(0, 0, 960, 540);
(To sidetrack, here's another question I do not quite understand as the API states the width and height parameter of this function must not exceed 960 * 540, but I am currently developing for a 1280 * 720 machine...so I do not know is it correct to set it 960 * 540)
And I got the header shown successfully, however the video itself auto-scale and show below the header, which is not quite follow my expectation. (I expect the video still be shown full screen with a header show on top of it, but not make the video auto-scale and shrink vertically..)
Anyone can give me advice? Thanks!