首页
学习
活动
专区
工具
TVP
发布

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

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

73030

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

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

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

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.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.3K20

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

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

3.1K20

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

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

2.3K30

通过样式覆盖修改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< speed <=1,默认值 0.2 content: "7447398157015849771" // 类型必须为String, //...水印移动范围为实际视频显示区域,如果视频自带黑边,播放器无法进行规避。 // 2. 在使用动态水印功能时,播放器对象的引用不能暴露到全局环境,否则动态水印可以轻易去除。 // 3....可以通过屏蔽全屏按钮,规避部分全屏后被劫持导致水印失效的情况。 // 5. 动态水印目前为测试功能,有问题请联系技术支持。

2.8K50

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

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

6.5K30

视频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.1K30

腾讯偷袭腾讯

02李鑫眼神.jpg 时间回到九月份的一个下午,坐在工位上的的E.m突然接到一个秘密任务: 干掉腾讯! 行动代号:干掉腾讯  下达这道命令的是Fooying。...Fooying是腾讯安全鼎实验室的成员,负责守卫腾讯的安全。从加入腾讯的那一天起,他和他的团队就枕戈待旦,时时刻刻提防着黑客对腾讯的攻击。...随着腾讯的快速发展,越来越多的企业入驻腾讯,不少黑客也将攻击的目标转移到了上。国内外因为被黑客攻击导致的删库、数据泄露、病毒勒索的公司比比皆是。腾讯云安全的重要性可想而知。...刘钢工位前.JPG Rud是本次红蓝对抗的红军负责人,将迎战蓝军猛烈的攻击,守卫腾讯。 在腾讯,每天都有众多安全人员在巡视、建设腾讯的安全防线。尽管如此,攻防两端终究是一场不均衡的较量。...腾讯的红蓝对抗已经逐步常态化,既是保护自己的方式,也是守护上合作伙伴的重要途径。 腾讯,正在用一场场自我的战斗,磨练出更安全的

112.2K30

vue+flvjs实现自定义控制条的流媒体播放器

vue+flvjs实现自定义控制条的流媒体播放器 flvjs与FLV有什么区别和联系?...5.传入src,一个简单的播放器就完成了。也可以在video标签中加入controls属性以利用H5播放器自带的控制条。 自定义控制条。 效果图,画面是ffmpeg推的一个mp4的流。...使用全屏API时需要注意,如果全屏的元素是video,自定义的控制条会被全屏后的video元素覆盖住,更改z-index也不能解决。所以要放大video的父级元素。 this....总结 本文通过实现一个自定义控制条的H5播放器,来学习相关的内容,包括:flvjs在vue中的使用。js的全屏API。以及一个document的一些内置对象的使用。...完整代码:gitee 我的博客即将同步至腾讯+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?

4.9K31
领券