请问如何在chrome原生的播放器全屏时显示弹窗
当使用chrome播放本地视频 或 播放视频时控制台输入const video = document.querySelector('video');video.requestFullscreen();使视频全屏,浏览器会使用一个似乎是原生的播放器,我尝试了一些方法在全屏播放时弹出弹窗,但是都无法显示,这些代码在别的播放器下好像都可以生效,请问有大佬知道哪出了问题吗
```
function showMessage(text) {
const div = document.createElement('div');
const fullScreenElement = getFullScreenElement();
div.style.cssText = `position: fixed; z-index: 999999; top: 85%; left: 8%; transform: translate(-50%, -50%); background-color: rgba(255, 255,255, 0.8); color: #000; padding: 15px 30px; border-radius: 7px; font-size: 20px;`;
div.innerText = text;
if (fullScreenElement) {
fullScreenElement.append(div);
} else {
document.body.appendChild(div);
}
setTimeout(() => {
div.parentNode.removeChild(div);
}, 1500);
}
/**
* 获取全屏元素（不同浏览器有不同实现）
* @returns {*}
*/
function getFullScreenElement() {
if (document.fullscreenElement) {
return document.fullscreenElement;
} else if (document.msFullscreenElement) {
return document.msFullscreenElement;
} else if (document.mozFullScreenElement) {
return document.mozFullScreenElement;
} else if (document.webkitFullscreenElement) {
return document.webkitFullscreenElement;
} else {
return null;
}
}
```
requestFullscreen会创建一个z-index为Integer.Max的最大值
如果只是最大化video的话感觉没什么好办法
但是可以尝试requestFullscreen video标签的父级
父级包裹video元素以及信息框元素试一下 李恒道 发表于 2023-5-6 09:20
requestFullscreen会创建一个z-index为Integer.Max的最大值
如果只是最大化video的话感觉没什么好办法
但是 ...
<html><head><meta name="viewport" content="width=device-width"></head><body><video controls="" autoplay="" name="media"><source src="xxx.mp4" type="video/mp4"></video></body></html>播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧 thfvdfer 发表于 2023-5-6 11:51
播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧
对body做操作试试 thfvdfer 发表于 2023-5-6 11:51
播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧
 李恒道 发表于 2023-5-6 12:26
可以参考下代码吗大佬,研究了半天还是没反应,感谢 thfvdfer 发表于 2023-5-6 14:36
可以参考下代码吗大佬,研究了半天还是没反应,感谢
 李恒道 发表于 2023-5-6 17:52
懂了,曲线救国也不错,感谢大佬回复
页:
[1]