移动端关于腾讯云视频全屏、缩小问题

在混合开发的工程种,h5做的一个腾讯云视频播放,需要放大缩小,在移动端,放大之后,如果手机小面有操作栏,那么放大之后的缩小按钮会位于操作栏上图片说明,导致无法点击到缩小按钮,没有看到腾讯云的api有相关问题;

我们尝试的解决方法;

我们在项目开发过程种尝试了检测放大,去改变他的高度,但是很遗憾并没有修改成功图片说明

##相关代码

this.player[`name${i}`].on("fullscreenchange", (val1, index1) => {
// console.log("1   ", document.body.clientHeight);
// console.log("2   ", window.screen.availHeight);
// console.log("3   ", window.screen.height);
// console.log("4   ", this.player[`name${i}`].width());
// console.log("5   ", this.player[`name${i}`].height());
// console.log(this.player[`name${i}`]);
// this.player[`name${i}`].options.height = window.screen.clientHeight;
// console.log("6   ", this.player[`name${i}`].height());
});

##结果
这些console打印出来的时屏幕的实际高度,但是最后设置之后的高度检测都是0;

想问下谁有什么解决方案么?谢谢额

参考GPT和自己的思路:

对于这个问题,我建议您可以使用CSS来解决。具体的做法是,在视频的全屏播放页面上添加一个覆盖全屏的div层来包裹播放器,在这个层上设置一些样式,如z-index、position、top、bottom等,来控制操作栏的位置,使得缩小按钮不会被操作栏遮挡住。而且,如果您要实现播放器的缩放的功能,也可以在这个div层上设置缩放的样式来实现。这样一来,就可以避免您所说的问题了。