在混合开发的工程种,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层上设置缩放的样式来实现。这样一来,就可以避免您所说的问题了。