首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

EasyGBS播放器全屏后无法展示云台组件的调整方法

去年EasyGBS最新增加了语音和云台控制功能,基于操作性考虑,我们也将云台控制和语音对讲功能集于一个控制面板当中,如下图: image.png 正常情况下,如果视频全屏显示,也可以直接在视频右侧显示组件...,但在我们的日常测试中,有时会发现EasyGBS播放器全屏后无法展示云台组件。...image.png 点击播放器全屏,全屏的是播放器组件,实际上播放器和云台是分开的,播放器不包含云台,当播放器全屏后属于最高层级,以至于遮挡了云台。...image.png 实际上,云台只是被遮挡,我们修改时要取消这个遮挡。找到播放器组件和云台组件,给两个组件定义上ID属性。...image.png 在页面加载完成后执行如下代码: image.png 将层级调整后,再次预览播放器界面,可以看到云台已经在播放器上方了: image.png EasyGBS更新新版以来,我们做了不少功能上的改进

77630

EasyPlayer客户demo点击全屏无法实现播放器的全屏调整优化

EasyPlayer播放器是TSINGSEE青犀视频维护的一个RTSP播放器项目,EasyPlayer遵循了标准流媒体码流协议,进行实时播放以及码流录制,在数据流的播放速度以及画质的解码显示上均做了大量深度的优化...不少用户采用EasyPlayer来搭建播放器Demo,搭建测试过程中,在demo上点击全屏只能是当前页面全屏,无法做到播放器全屏,这显然是不符合使用习惯的,因此我们对该处问题进行优化。...以上问题的全屏代码如下: 从上可知获取的dome是个数组,当点击事件触发时不能使其全屏,因此我们需要根据点击的按钮判断想要全屏的demo元素,更改代码如下: 更改后全屏效果如下: EasyPlayer...播放器功能全面,可动态的设置视频输出的显示比例,调整音量的输出大小,实时视频流量数据等,同时支持手动输入视频源和获取指定流媒体服务器的直播视频源的模式,欢迎大家关注和测试。

1.2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Tcplayer web进入全屏后阻止默认按enter和space键退出全屏

    说明 当前Tcplayer SDK进入全屏后按enter或space键是可以退出全屏的, 官方体验demo,那如果不想使用这两个键来退出全屏怎么阻止呢。...解决方案 经过测试可以通过监听播放组件的键盘事件,然后拦截该事件来阻止SDK默认退出全屏行为,代码如下 播放器容器 --> <video id="player-container-id" preload="auto" width="640" height="360" playsinline...-- 注意事项: * 播放器容器必须为 video 标签 * player-container-id 为播放器容器的ID,可自行设置 * 播放器区域的尺寸请按需设置,建议通过 css 进行设置,通过css...ContinuePlay: { auto: true, // 是否在播放时自动续播  }, ProgressMarker: true,   },  }); // 阻止enter键和space键退出全屏

    2.4K30

    腾讯云 Web 超级播放器开发实战

    关于超级播放器 腾讯云 Web 超级播放器 TCPlayer 可实现在手机浏览器和 PC 浏览器上播放音视频流的问题,功能强劲,兼容性好,可以不依赖用户安装 App,就能进行播放。...开发前准备 (1)我们需要引入腾讯云 Web 超级播放器的 JS 库,以下是我改造后的资源,可点击如下链接进行下载: https://download.csdn.net/download/michaelline...false 为不自动 5 live bool 是否直播功能,默认为 false 6 x5_player bool 设为 true 。...Fullscreen API 的浏览器环境下,尝试使用浏览器提供的 webkitEnterFullScreen 方法进行全屏,如果支持,将进入系统全屏,控件为系统控件 10 playsinline bool...支持的值:h5-page (该属性为 TBS 内核实验性属性,非 TBS 内核不支持) 13 allowFullScreen bool 兼容性写法,是否允许全屏播放 14 width int 设置播放器宽度

    21510

    BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等

    折叠状态 STATE_EXPANDED: 展开状态 STATE_DRAGGING : 过渡状态 STATE_SETTLING: 视图从脱离手指自由滑动到最终停下的这一小段时间 STATE_HIDDEN : 默认无此状态...8.设置默认全屏显示 既然有了上面的方法,是不是有思路了,那有人说了,我把高度设置全屏不就完事了吗 事实上还真不行,BottomSheetDialogFragment只会显示实际高度,即布局有效高度,即使根布局高度...view吗,我们试一下设置这个view的高度行不行 view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT 看看效果 首先是像默认效果一样...,当内容大于等于全屏的时候,会先到达一个高度,即上面效果的高度,然后继续向上滑的话,可以铺满全屏。...看看效果 可以了,这下是直接就全屏了,但是向下拉的时候发现,并没有一次性收起,而是先停在了全屏时显示的默认位置,我们再设置高度为全屏试试 behavior.peekHeight = 3000

    4.2K30

    腾讯云点播 SDK 集成接入之踩坑&填坑记

    我们常常会面临几个抉择: 使用原生视频组件(如:MediaPlayer) 使用原生硬解码/FFmpeg软解,定制视频播放组件 使用完全开源的第三方组件(如:ijkplayer) 使用商业第三方组件(如:腾讯云播放器...二、SDK 功能点 腾讯云点播支持的功能点很多,基本可以覆盖日常的开发使用,除了基础的播放功能外,还提供一系列功能 全屏播放 滑动调节进度 滑动调节亮度和声音 截图 弹幕 倍数播放 硬件加速 悬浮窗播放...= 0 rect.y = 0 rect.width = 810 rect.height = 540 prefs.floatViewRect = rect // 播放器默认缓存个数...配合腾讯云点播后台系统,可以实现更多个性化功能,下面我们就来看看如何配合腾讯云后台实现播放。 以下是文档提供的播放代码,也就是结合腾讯云实现的播放。...= 0 rect.y = 0 rect.width = 810 rect.height = 540 prefs.floatViewRect = rect // 播放器默认缓存个数

    3.8K20

    腾讯云WeData全新升级:数据分类分级管理,构建数据安全屏障

    版本介绍 产品介绍: 腾讯云WeData(以下简称 WeData)是一站式数据开发治理平台,支持公有云和私有化部署。...核心能力介绍 敏感数据识别与管理,构建数据安全屏障 功能说明: WeData数据安全服务旨在提供安全的数据共享,打通基础账号映射能力,Ranger 实现界面化权限策略管理。...联系我们 本文仅介绍了WeData新版本升级的能力,如果您想全面的了解WeData全部功能,可登录腾讯云WeData官网,或在腾讯云官网搜索WeData。...客服咨询:4009100100(7 × 24小时) 备案帮助:4009100100转3(7 × 24小时) 腾讯云助手 腾讯云助手是腾讯云为开发者提供的移动管理工具,可以帮助开发者在手机上快捷管理云资源和云账户...通过腾讯云助手,开发者不论在何时何地,都可快速进行管理操作,提高管理效率。微信扫一扫下方二维码,立即体验腾讯云助手。 问答社区 问答社区是腾讯云为开发者提供的交流平台。

    57210

    新知 | 腾讯云视立方播放器技术实现与应用

    本期我们邀请了腾讯云音视频技术导师——李正通,为大家分享腾讯云视立方播放器技术实现与应用。...本次分享的主要内容分为三块,一是腾讯云视立方播放器的相关技术背景,二是业务侧经典场景应用方案,三是短视频场景应用的技术实现方案。...腾讯云视立方播放器技术背景 腾讯云视立方播放器基于腾讯视频同款内核打造,完美融合了腾讯视频的能力,视频兼容性、适配能力以及播放稳定性均大幅提升,解决了系统引擎各种播放异常问题。...经典场景应用方案 播放器UI组件封装了完备的基础操作功能,可以实现小窗播放、切换全屏播放、滑动控制亮度音量、滑动控制进度等业务侧常见的应用操作。...腾讯云采用的优化思路是使用不超过两个播放器实例,并通过服务去管理播放器的复用与使用。

    2.5K30

    通过样式覆盖修改Tcplayer动态水印样式

    device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> 腾讯云视频点播示例...-- 注意事项: * 播放器容器必须为 video 标签 * player-container-id 为播放器容器的ID,可自行设置 * 播放器区域的尺寸请按需设置,建议通过 css 进行设置,通过css...speed: 0.2,// 建议取值范围 0默认值 0.2 content: "7447398157015849771" // 类型必须为String, //...水印移动范围为实际视频显示区域,如果视频自带黑边,播放器无法进行规避。 // 2. 在使用动态水印功能时,播放器对象的引用不能暴露到全局环境,否则动态水印可以轻易去除。 // 3....可以通过屏蔽全屏按钮,规避部分全屏后被劫持导致水印失效的情况。 // 5. 动态水印目前为测试功能,有问题请联系技术支持。

    3K50

    H5案例分享:微信视频播放全屏问题(转)

    微信视频播放全屏问题    在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送...x5-video-orientation="portraint" /*播放器支付的方向, landscape横屏,portraint竖屏,默认值为竖屏*/...这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,ISO需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的 ,安卓则不需要,因为默认全屏。...至于为什么同层播放只对安卓开放,是因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题...x5-video-orientation:声明播放器支持的方向,可选值landscape 横屏, portraint竖屏。默认值portraint。

    6.8K30

    视频H5 video最佳实践

    " // 播放器的方向, landscape横屏,portraint竖屏,默认值为竖屏 style="object-fit:fill"> src: 视频的地址 controls:...这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,IOS需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的 ,安卓则不需要,因为默认全屏。...至于为什么同层播放只对安卓开放,是因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题...(非腾讯白名单机制的一种处理措施)。...0; } }) 隐藏播放控件 据说腾讯的android团队的x5内核团队放开了视频播放的限制,视频不一定调用它们那个备受诟病的视频播放器了,x5-video-player-type="h5"属性这个属性好像就有点那个意思

    4.6K30
    领券