javascript - 如何在视频上叠加另一个 div？

Question

我目前正在使用 sdk 3.5.2(根据需要)开发三星智能电视应用

我正在使用 SEF 插件和 setDisplayArea()，我能够显示全屏视频。

但现在我面临的问题是我想在视频顶部叠加 2 个 div，一个页眉和一个页脚，但我无法正确完成。

我尝试过的和得到的描述如下:

在我的 html 中，我包含了插件，并获得了播放器对象 z-index 和位置集

<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>

在我的css中，我设置了header div的z-index

#SplashHeader{
    position: absolute;
    top:0px;
    left:0px;
    height:40px;
    width: 1280px;
    background: grey;
    z-index: 100;
}

在我的 Js 中，我调用了 setdisplayarea()

this.plugin.SetDisplayArea(0, 0, 960, 540);

(题外话，还有一个问题我不太明白，因为API规定这个函数的宽高参数不能超过960 * 540，但是我目前正在为1280 * 720的机器开发...所以我不知道设置960 * 540是否正确)

而且我成功显示了标题，但是视频本身会自动缩放并显示在标题下方，这并不完全符合我的预期。(我希望视频仍然全屏显示并在其顶部显示标题，但不会使视频自动缩放和垂直收缩..)

有人可以给我建议吗？谢谢!

Answer 1

SEF 播放器位于显示层的最后面，因此您无需在此处指定任何 z-index。此外，如果可能，请不要在三星电视应用程序中使用超过 99 的 z-index，一些资源表示 100 及以上用于三星 native 显示，例如 IME 和 Popup。

对于 1280x720 分辨率的视频显示有点棘手。无论您使用 720p 还是 540p 模式，视频显示始终以 960x540 全屏显示。视频将从 960 拉伸(stretch)到 1280 或者比例为 0.75。如果要显示 640x720 像素的视频宽度，则视频大小为 480x540。

最后的建议:

• 播放功能后再次调用setdisplayarea
• 在真实设备上进行测试(模拟器有时会出现在视频显示上)