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

Question

在混合开发的工程种，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；

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

Answer 1

参考GPT和自己的思路：

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