(比如在直播的时候根本不需要进度条,于是我从网上搜到,隐藏进度条的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某些原生按钮的技术,因为举例子迫不得已而涉及到的某些名词也已经做了代换处理,请管理大大尽快过审吧,谢谢!