anychat画面显示文字

酱糊

请问，如何在视频画面的前端上可以一直显示文字？我们用z-index,文字只能在视频画面上显示一会，然后就会被视频画面覆盖掉。

admin

理论上说，要么一直看得到文字，要么一直看不到文字，怎么会只能显示一会呢？多长时间会被覆盖掉？覆盖之前的画面截图看一下？

酱糊

是被覆盖了，代码如下：
<div>
    <div class="div_text1">2222
    <iframe style="position:absolute;visibility:hidden;top:0px;left:0px;width:100%;height:100%;z-index:9999;" frameborder=0 scrolling="no"></iframe>
    </div>
    <div class="div_video1" id="divRemoteMainVideo" ></div>
    <div class="div_video2" id="divRemoteSubVideo" ></div>
    <div class="div_video3" id="divLocalVideo" ></div>
</div>

222会被divRemoteMainVideo覆盖

admin

您好，我让开发团队帮您看一下这个问题，稍后给您回复。

酱糊

您好，我是想在视频画面的左上角显示姓名，右上角放个按钮，用于视频设置。
222是显示姓名，但是照您的方法，还是会被视频覆盖。

佰锐技术-卓剑锐

你好，研发跟进中。

酱糊

像附件这样的效果。

bairui.tony

显示姓名的文字可以实现，见如下脚本：
css脚本：
#TopDisplay_Local{ position:absolute; display:block; background-color:Yellow;margin-left:338px;margin-top:-210px;width:120px;height:20px}

html脚本：
<div id="TopDisplay_Local">Hello, AnyChat!
<iframe style="position:absolute;visibility:inherit;top:0px;left:0px;width:100%;height:100%;z-index:100;" frameborder=0 scrolling="no"></iframe>
</div>

效果截图如下：

显示文字有几个关键点：
1、iframe的width、height需要和显示文字的div的width、height保持一致；
2、iframe的visibility如果设为hidden将不会正常显示div中的文字；
3、因为文字显示层使用了绝对定位，截图的效果是在“1366 * 768”的分辨率下的显示；如果分辨率不同，需要调整div的margin-left和margin-top属性值获取最佳显示效果。

关于“按钮”的显示，不能使用上面的代码，如果使用的话，按钮可以显示，但不能被点击；原因是因为操作被iframe挡住！
可以下载附件代码参考。。

admin

在上面的脚本中，如果需要响应鼠标点击事件，则需要设置div的z-index，而且z-index值要高于iframe的z-index值：

1. <div id="TopDisplay_Local">
   
2. <iframe style="position:absolute;visibility:inherit;top:0px;left:0px;width:100%;height:100%;z-index:100;" frameborder=0 scrolling="no"></iframe>
   
3. <div style="width: 100%;height:100%;position: absolute;top: 0; z-index:101;"> <a onclick="alert('OnClientEvent');">Hello, AnyChat2!</a></div>
   
4. </div>

复制代码

769133787

admin 发表于 2014-4-9 14:44
在上面的脚本中，如果需要响应鼠标点击事件，则需要设置div的z-index，而且z-index值要高于iframe的z-index ...

我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层
<!-- 拍摄客户头像dialog弹出框浮层 -->
        <div id="winUpload" >
        </div>
当点击拍照按钮时，拍照完成后，会将这个浮层弹出，使用的是jQuery easyui的 dialog弹框，
//为浮层动态添加元素（添加多个元素，为了演示就不添加多个，只写下面一个）
$("#winUpload").append('<input type="button" onclick="uploadCancel()" value="关闭">');
//动态添加元素完毕后，将浮层以dialog的形式弹出，
$("#winUpload").dialog({
                modal: true,
                closable: true,
                draggable: true,
                resizable: true,
                width: 800,
                height: 300,
                minimizable: false,
                collapsible: false,
                title: "头像上传"
        });
//这个时候浮层是可以弹出的，但是弹出的效果就如1楼贴的图片一样，被object元素压在后面了，我火狐上可以在前面显示，谷歌和IE上都不行，都在后面
我按照你刚说的方法试了，如果用这种方式，则无法动态添加元素，就算是添加上了也还 是在后面，希望你们能做一个符合我需求的demo：浮层的元素动态添加，浮层要在视频窗口的上面，谢谢，如果我描述的不够清楚，请再告诉我，万分感谢！！！