各位大佬.萌新求助,关于视频网页全屏时,进度条遮挡问题
本人平时刷视频比较多. 视频类的脚本也多. 不过总有体验不是很好的地方.于是打算自己撸. 在处理网页全屏时.遇到一些问题. 困扰我很久了.现在贴出来给各位大佬们看看.能不能指点一下.先贴代码:
```
fullscreen: (() => {
const CLASS = "uweb-fullscreen";
let parents = []; // 缓存追加过的元素
css(`.${CLASS} {
margin: 0 !important;
padding: 0 !important;
inset: 0 !important;
width: 100vw !important;
min-width: 0vw !important;
max-width: 100vw !important;
height: 100vh !important;
min-height: 0vh !important;
max-height: 100vh !important;
position: fixed !important;
background: #000 !important;
transform: none !important;
z-index: 2147483646 !important;
object-fit: contain !important; }`);
const _toggle = (element) => {
if (parents.length) {
// 如果已经追加过了. 就代表删除
parents.forEach((el) => el.classList.remove(CLASS));
parents = [];
} else {
// 关于这里为什么用element.parentElement.parentElement;
// 因为主流视频的进度条都是video元素的祖父元素平级. 这是为了全屏时不遮挡进度条
// 但是这样有一个问题.就是如果video的祖父元素的宽高比较特殊,
// 那么会导致视频不能完整显示.进度条仍然有可能被遮挡. 不出现在视窗
// 我在想.或许可以通过css另外写一些样式解决.可是能力有限.不太懂css,所以不确定
// 原本是打算通过算法找到进度条.比如通配特征. 类名. 属性等.这样开销太大了.
// 在混杂进度条在底部的特征.仍然感觉复杂.
// 也想过通过video的祖父元素 .遍历他.让他所有子元素提升z-index .不过这样太蠢了. // 也想过比较 offsetWidth 和 offsetHeight,但是适配还是有问题.
element = element.parentElement.parentElement;
while (element && element !== document.body) {
parents.push(element);
element.classList.add(CLASS);
element = element.parentElement;
}
}
};
// 顶层收到消息, 找到这个iframe 开始走切换流程
window.top === window && imsg.on(CLASS, (src) => _toggle(document.querySelector(`iframe, iframe`)));
return {
// 如果是iframes 发起的调用,那么通知顶层处理,附带链接.方便查找.
web: (el = videoController.player) => (_toggle(el), window !== window.top && imsg.toParent(CLASS, location.href)),
full: (el = videoController.player) => (document.fullscreenElement ? document.exitFullscreen() : el.parentElement.requestFullscreen()),
};
})(),
```
简单的写了几句注释.可惜页面看上去格式有点乱. 在贴一下imsg的代码:
```
export const imsg = {
send(target, channel, data) {
if (target?.postMessage) target.postMessage({ __iframeMsg__: true, channel, data }, "*");
},
toParent(channel, data = {}) {
this.send(window.parent, channel, data);
},
reply(event, channel, data = {}) {
if (event.source && event.source.postMessage) this.send(event.source, channel, data);
},
on(channel, callback) {
window.addEventListener("message", (event) => {
const msg = event.data;
if (msg?.__iframeMsg__ && msg.channel === channel) callback(msg.data, event);
});
},
};
```
核心问题都写在注释里了. 文档写的少.大家凑合看吧.解决不了问题就只能抛出去. 坐等大佬!!!
` 本帖最后由 wilsons 于 2025-8-19 18:11 编辑
最好提供下网页，虽然没有仔细看代码，但根据我的经验，全屏元素被遮挡常见原因：
1. 全屏后，元素在全屏元素的外部，由于全屏元素占满了屏幕，外部的元素无法显示，这时只需要在全屏时把需要的元素移动到全屏元素内，退出全屏恢复即可。
2. 是否全屏后，导致某些元素意外被遮挡，比如，z-index发生了变化，样式错位，fixed元素可能不会随着全屏而移动等。
3. 某些动态加载的元素，比如弹窗在全屏元素外，无法在全屏里出现，其实，还是1的问题。 wilsons 发表于 2025-8-19 18:06
最好提供下网页，虽然没有仔细看代码，但根据我的经验，全屏元素被遮挡常见原因：
1. 全屏后，元素在全屏 ...
哥哥有理, 小弟唐突了.随便找了个网站,https://www.kanmaoyy.com/duanju/335612-2-1.html
因为使用了element = element.parentElement.parentElement;
也就是从祖父元素开始向上全屏. 当视口发生变化的时候.会出现这种情况:
.... 尴尬了. 不知道怎么插入图片.
就那个链接.你试试看打开f12. 然后拖动一下 .窗口发生变化就知道我说啥了.
还有你吧element = element.parentElement.parentElement;注销就能看出来对比了.
需要我吧全部代码贴出来给你测试吗太长了.我怕影响别人的观看体验. 哈哈哈 另外一个思路不知道可不可以
哥哥可以尝试检测video
直接把video的元素append到自己的div里？
这样video就会脱离掉原来的文档流
尝试自己接管来复写
就是不知道会不会对网页原本的逻辑造成破坏性 李恒道 发表于 2025-8-19 20:24
另外一个思路不知道可不可以
哥哥可以尝试检测video
直接把video的元素append到自己的div里？
哈哈哈. 最开始的时候我还真干过. 当时是跨域问题,后来发现iframe里面怎么改都没用.需要改top里的iframe, 考虑到操作dom也不是很好. 就放弃了.就用了postmessage, 最大的难点在于每个网站的video与进度条的层级结构不一样.很难兼容.想用网站自定义的进度条的主要原因.是因为有的进度条带下一集和发送弹幕等. 我看了下其他视频类脚本的处理方式基本都是单独配置站点规则,这样维护太麻烦了. 看来想通用只能用原生进度条凑合了 uuorz 发表于 2025-8-19 21:45
哈哈哈. 最开始的时候我还真干过. 当时是跨域问题,后来发现iframe里面怎么改都没用.需要改top里的iframe, ...
好像对哦
确实存在这种情况
那好像只能考虑单独配置了QAQ
页:
[1]