你无法通过标准HTML或CSS设置浏览器原生画中画窗口的时间显示样式，因为picture-in-picture-time伪类并不存在，且浏览器出于安全、一致性和技术限制原因禁止网页自定义PiP界面的UI元素；实际可用的::picture-in-picture伪类仅能修改video元素本身在PiP模式下的部分视觉样式（如边框、背景色），无法影响时间显示等浏览器控制条内容；若需自定义时间样式，必须构建包含video元素和自定义控制条的播放器UI，并通过JavaScript监听timeupdate和loadedmetadata事件动态更新时间显示，再结合requestPictureInPicture() API实现画中画功能，但进入PiP后浏览器仍会叠加其原生控制界面，因此完全自定义PiP内部时间样式在当前技术下不可实现。
关于HTML如何设置画中画（Picture-in-Picture, PiP）的时间样式，以及
picture-in-picture-time
伪类的作用，直接的答案是：你无法直接通过标准HTML或CSS来设置浏览器原生画中画窗口内部的时间显示样式。更重要的是，
picture-in-picture-time
这个CSS伪类目前并不存在于任何W3C标准或主流浏览器的实现中。
解决方案
原生浏览器提供的画中画窗口，其内部的用户界面（UI），包括播放/暂停按钮、进度条、以及时间显示等，都是由浏览器自身渲染和控制的。这通常是为了安全、一致性以及用户体验的考虑，防止网页内容随意篡改关键的浏览器UI。所以，我们无法通过CSS选择器去定位并修改这些元素。
如果你想实现一个可自定义样式的时间显示，并且行为上类似画中画，那么你需要构建一个自定义的视频播放器UI，并在其中实现类似的功能。这通常意味着你需要在网页的HTML结构中放置一个
video
元素，然后用JavaScript监听其播放状态、时间和进度，并用HTML/CSS构建你自己的播放控制条，包括时间显示。当用户需要“画中画”时，你可以将这个自定义的播放器UI（或者仅仅是视频元素本身）通过JavaScript的Picture-in-Picture API进入PiP模式。但即便如此，进入PiP模式后，浏览器依然会叠加它自己的原生控制界面。
为什么浏览器限制了画中画界面的样式自定义？
这其实是个挺有意思的设计选择，背后有几个核心考量。首先是安全性。想象一下，如果一个恶意网站可以随意修改画中画窗口的UI，它可能会伪装成其他应用的通知，或者诱导用户点击一些看似无害实则有害的按钮。浏览器厂商为了保护用户，通常会对这种核心UI元素进行严格的沙盒化处理，不给网页内容直接修改的权限。
立即学习“前端免费学习笔记（深入）”；
其次是用户体验的一致性。无论用户访问哪个网站，当视频进入画中画模式时，他们看到的控制界面都是统一的，这大大降低了用户的认知负担。用户不需要学习每个网站独特的PiP操作方式，直接上手。这就像操作系统自带的文件管理器，你不会期望每个应用都重新实现一套文件选择界面。
再者，技术上讲，这些原生UI元素通常存在于浏览器的“影子DOM”（Shadow DOM）之外，或者说是更深层次的浏览器渲染引擎中。它们不暴露给常规的CSS选择器和JavaScript DOM操作API。试图用
!important
或者各种CSS hack去覆盖，都是徒劳的，因为它们根本不在网页的渲染层可触及的范围之内。所以，我们能做的，就是接受这种设定，然后思考如何在现有框架下实现我们想要的效果。
如何在自定义视频播放器中实现类似画中画的时间显示样式？
既然原生PiP界面的时间样式无法控制，那我们把重心放在“自定义视频播放器”上。这才是真正能发挥我们创意的地方。
一个基本的思路是：
HTML结构： 在
video
标签旁边，放置一个或多个
div
来作为你的自定义控制条，其中包含显示当前时间、总时长的
span
或
div
。
CSS样式： 你可以随心所欲地样式化这些
span
或
div
。
.custom-video-player { position: relative; width: 640px; /* 或者你想要的尺寸 */ height: 360px; background-color: black;}.custom-video-player video { width: 100%; height: 100%; display: block; /* 避免底部空白 */}.controls-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.6); color: white; padding: 10px; box-sizing: border-box; display: flex; justify-content: flex-end; /* 时间显示靠右 */ align-items: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; opacity: 0; /* 默认隐藏，鼠标悬停时显示 */ transition: opacity 0.3s ease-in-out;}.custom-video-player:hover .controls-overlay { opacity: 1;}.current-time, .total-time { margin: 0 5px; font-weight: bold; color: #f0f0f0; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
JavaScript逻辑： 用JavaScript监听
video
元素的
timeupdate
事件来更新
current-time
，监听
loadedmetadata
事件来获取
total-time
。
const video = document.getElementById('myVideo');const currentTimeSpan = document.querySelector('.current-time');const totalTimeSpan = document.querySelector('.total-time');function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;}video.addEventListener('loadedmetadata', () => { totalTimeSpan.textContent = formatTime(video.duration);});video.addEventListener('timeupdate', () => { currentTimeSpan.textContent = formatTime(video.currentTime);});// 还可以添加逻辑来处理播放/暂停、进度条拖动、全屏、进入PiP等// video.requestPictureInPicture() 是进入原生PiP的API
通过这种方式，你完全掌控了时间显示的样式和行为。当视频进入原生PiP模式后，虽然浏览器会叠加自己的UI，但用户在主页面上看到的仍然是你精心设计的自定义播放器。
::picture-in-picture
::picture-in-picture
伪类与时间样式有何关联？
::picture-in-picture
是一个有效的CSS伪类，但它与画中画窗口内部的“时间样式”没有直接关系。这个伪类的作用是允许你为处于画中画模式下的
video
元素本身应用样式。
换句话说，当一个
video
元素进入PiP模式后，它在主页面上会消失（或者说被隐藏），然后在一个独立的、浮动的窗口中显示。
::picture-in-picture
伪类允许你对这个浮动窗口中的视频元素（而不是窗口的控制条）进行样式调整。
例如，你可以用它来给PiP模式下的视频添加一个边框，或者改变它的背景色（尽管通常视频会占据整个空间，所以背景色可能不明显），或者调整一些其他视觉属性。
/* 当视频进入画中画模式时，给它一个红色边框 */video::picture-in-picture { border: 2px solid red; /* 理论上可以调整一些其他属性，但实际效果受限于浏览器实现 */ /* 比如改变背景色，但视频通常会铺满，所以效果不明显 */ background-color: blue;}/* 甚至可以尝试调整尺寸，但通常PiP窗口尺寸由浏览器控制 *//* video::picture-in-picture { width: 300px; height: 180px;} */
但请注意，这些样式修改的是视频内容的容器，而不是浏览器提供的“播放/暂停”、“时间显示”等控制按钮。那些控制元素依然是浏览器私有的，无法通过
::picture-in-picture
或任何其他标准CSS伪类来修改。所以，如果你最初的意图是想美化PiP窗口里的时间数字，那么
::picture-in-picture
也帮不上忙。它更多是用来处理视频内容本身在PiP状态下的视觉呈现。
以上就是HTML如何设置画中画时间样式？picture-in-picture-time伪类的作用是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1571487.html
微信扫一扫 
支付宝扫一扫 
