How to overlay another div on the video?

问题

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!

回答1:

The SEF player is located in the most back of display layers so you don't need to specify any z-index there. Also if possible please don't use z-index more than 99 in Samsung TV Apps, some resources said that 100 and above are used for Samsung native display such as IME and Popup.

And for video display on 1280x720 resolution is a bit tricky. The video display is always full screen on 960x540 whether you're using 720p or 540p mode. The video will be stretched to 1280 from 960 or the ratio is 0.75. If you want to display width of video for 640x720 pixel then the size of video is 480x540.

Last advice:

• call setdisplayarea again after play function
• do test on real device (emulator sometimes lie on video display)

来源：https://stackoverflow.com/questions/22164496/how-to-overlay-another-div-on-the-video