100吾爱币,前端CSS求助

查看 47|回复 3
作者:noyes6   
是这样的,我用简单的HTML5代码写了一个网页播放器,并且根据某些已经公开的API,我隐藏掉了网页播放器中不需要的按钮。
(比如在直播的时候根本不需要进度条,于是我从网上搜到,隐藏进度条的css伪类应该这样写:    video::-webkit-media-controls-timeline {display: none;} ,经过这段css代码之后果然隐藏掉了进度条【如下图】。)

这个功能是非常方便的,但是我遇到了一个问题:这些css伪类代码只能隐藏掉原生html5video的控制栏。对于原生的画中画(picture-in-picture)功能里面的按钮,它们却无法隐藏,比如下图,当我打开画中画功能的时候,讨厌的进度条和暂停按钮又出现了【如下图】。

原生chrome虽然没有进度条,但是依然有播放暂停按钮。基于chromium内核的opera浏览器进度条等功能一并做上了。
因为我有时会用这个播放器来加载播放一些直播HLS流,而直播并不需要进度条,也不需要暂停,所以这些原本为了方便的按钮在此时看来是多么的多余。(有的人会说,直播系统会自动识别,本来就不会返回进度条的。但是HLS流的本质是一个m3u8索引文件,内含数个ts切片,每个切片有长度的,所以在电脑端依然是会产生进度条的。这些不在讨论之列,就算不是搞直播,而是一个别的什么特殊需求,反正就是要隐藏画中画小窗内的这些讨厌按钮就是了,不是隐藏画中画功能本身,而是隐藏画中画小窗里的原生按钮)
顺便提一嘴:某鱼直播PC网页端的画中画模式貌似也是调用的浏览器自带的画中画功能,但是在opera浏览器里打开某鱼的画中画,却发现上面干干净净,隐藏了进度条,也隐藏了暂停按钮,只保留了关闭画中画的按钮。我希望达到的就是某鱼直播的这种效果【如下图】,然而某鱼的网页结构如此复杂,以至于我完全没有分析透它的代码。


[color=]所以我的需求是:希望有大神能帮我找到画中画模式下这些按钮的css伪类,以便我能够用css代码隐藏他们,或者用js能隐藏掉这些按钮也可以,做到类似某鱼直播的画中画模式的那种式样。

首次发布悬赏帖,希望有大神能帮忙分析一下,或者帮忙研究一下某鱼网页端看看它是如何做到隐藏了这么多按钮的,不胜感激,谢谢!

本文纯属想讨教关于从代码层面隐藏html5某些原生按钮的技术,因为举例子迫不得已而涉及到的某些名词也已经做了代换处理,请管理大大尽快过审吧,谢谢!

画中画, 按钮

noyes6
OP
  


zyl18203818311 发表于 2023-5-31 15:58
解决了没

还没有解决。
不知道为啥,这问题很难吗?这上面这么多大佬,这个问题难道就这么难以至于这么久都没有人能解决。
难道之前从来就没发起过悬赏,解决率比较低,被大佬们误以为没诚信了?
我诚信度很好的好不好?只是因为之前从来没发起过悬赏所以解决率才低而已。
zyl18203818311   

解决了没
Guo-Guo   

根据 MDN 的文档3,画中画模式是由浏览器的 API 来控制的,而不是 CSS 选择器。你可以使用 HTMLVideoElement 的属性和方法来启用或禁用画中画模式,例如:
```javascript
videoElement.requestPictureInPicture(); // 请求进入画中画模式
videoElement.disablePictureInPicture = true; // 禁止画中画模式
```
你也可以使用 Document 的属性和事件来检测和监听画中画模式的状态,例如:
```javascript
document.pictureInPictureEnabled; // 返回一个布尔值,表示是否可以使用画中画模式
document.addEventListener('enterpictureinpicture', function(event) {
  // 当视频进入画中画模式时触发
});
```
你可以参考文档3来了解更多关于画中画 API 的用法和示例。
如果你想要使用 CSS 选择器来隐藏画中画模式下的视频组件,你可能需要先判断视频是否处于画中画模式,然后再应用相应的样式。这可能需要结合 JavaScript 和 CSS 来实现。例如:
```javascript
// 判断视频是否处于画中画模式
if (videoElement === document.pictureInPictureElement) {
  // 如果是,则给视频添加一个类名
  videoElement.classList.add('pip-mode');
}
```
```css
// 根据类名来隐藏视频组件
video.pip-mode::-webkit-media-controls-panel {
  display: none;
}
```
这只是一个简单的例子,你可能需要根据你的具体需求来调整代码。希望这些信息能够对你有所帮助。😊
您需要登录后才可以回帖 登录 | 立即注册