为了方便不同终端设备用户的使用,我们将TSINGSEE青犀视频各平台都做了屏幕显示自适应的机制,以EasyCVR为例,管理界面在大屏下会显示所有的操作和状态列表,在小屏下则会自动省略一些状态显示,最右侧操作栏仍保持完整显示。
在我们对EasyCVR管理界面的表格进行不同大小的测试时,发现小屏状态下,界面右操作侧栏已经遮挡了表格左侧列表的大多数内容,显示如下:
操作栏在大屏下确实方便,因为固定在最右侧,不管表格内容再多,都可以一眼看见,但是在小屏下则需要我们重新进行调整。
1.添加页面监听事件实时检查页面宽度:
2.在计算属性中加入判定条件:
调整后预览界面如下:
监听代码:
mounted() {
const _this = this
_this.screenWidth = window.screenWidth;
window.onresize= () => {
return (() => {
window.screenWidth = document.body.clientWidth;
_this.screenWidth = window.screenWidth;
})();
}
}
EasyCVR实现了Web浏览器、手机浏览器、微信、PC客户端等各终端无插件播放,此外,我们也对外提供HTTP API接口,通过接口可以获知流媒体转发服务的运行状态信息,转发会话信息,服务器配置和版本信息等。欢迎大家对EasyCVR进行实际部署测试。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。