AnyChat技术支持论坛

标题: anychat画面显示文字 [打印本页]

作者: 酱糊 时间: 2014-3-31 15:53
标题: anychat画面显示文字
请问，如何在视频画面的前端上可以一直显示文字？我们用z-index,文字只能在视频画面上显示一会，然后就会被视频画面覆盖掉。

作者: admin 时间: 2014-3-31 16:09
理论上说，要么一直看得到文字，要么一直看不到文字，怎么会只能显示一会呢？多长时间会被覆盖掉？覆盖之前的画面截图看一下？

作者: 酱糊 时间: 2014-3-31 16:27
是被覆盖了，代码如下：
<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 时间: 2014-3-31 16:54
您好，我让开发团队帮您看一下这个问题，稍后给您回复。

作者: 酱糊 时间: 2014-4-1 10:29
您好，我是想在视频画面的左上角显示姓名，右上角放个按钮，用于视频设置。
222是显示姓名，但是照您的方法，还是会被视频覆盖。

作者: 佰锐技术-卓剑锐 时间: 2014-4-1 10:42
你好，研发跟进中。

作者: 酱糊 时间: 2014-4-1 11:04
像附件这样的效果。

nameOnVideo.JPG (29.24 KB, 下载次数: 8303)

作者: bairui.tony 时间: 2014-4-1 18:05
本帖最后由 bairui.tony 于 2014-4-2 18:17 编辑

显示姓名的文字可以实现，见如下脚本：
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挡住！
可以下载附件代码参考。。

AnyChatWebDemo.rar

144.9 KB, 下载次数: 24

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

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

复制代码

作者: 769133787 时间: 2015-3-11 11:53

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

我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层

<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：浮层的元素动态添加，浮层要在视频窗口的上面，谢谢，如果我描述的不够清楚，请再告诉我，万分感谢！！！

欢迎光临 AnyChat技术支持论坛 (http://bbs.anychat.cn/)