扫码关注官方订阅号
正文
秋婷君_5587
发布时间:2026-10-06 10:02:37
410人浏览过
来源于php中文网
原创
根本原因是Safari未将当前视频识别为合法画中画源:需先用开发者工具确认video标签存在且未被隐藏或禁用pictureInPictureEnabled属性,再通过webkitSetPresentationMode API强制激活,或启用Media Session及系统级PiP白名单。
你正在Safari里看B站技术分享视频,想切到Notion写笔记时让视频继续悬浮播放,却点遍右下角、试了快捷键、甚至重启浏览器都没反应——根本原因不是操作错,而是Safari压根没把当前视频识别为合法画中画源。
很多网站用
这一步必须先做,否则所有后续操作都是无用功。
即使DOM中存在标签,若其pictureInPictureEnabled属性被设为false,Safari会直接屏蔽画中画入口。在开发者工具的“元素”面板中找到标签→右侧“属性”栏查看是否有pictureInPictureEnabled="false"。若有,说明网站主动关闭了该功能,需跳过UI方法,改用JavaScript强制调用。
【注意:修改此属性需在控制台执行setAttribute,但仅临时生效,刷新即还原】
此方法绕过所有UI限制,直接向WebKit引擎发送指令,适用于已播放但右键无选项、快捷键无反应的场景。
方法一:基础执行命令确保视频正在播放→按Option+Command+I打开开发者工具→切换到“控制台”→粘贴以下代码并回车:document.querySelector('video').webkitSetPresentationMode('picture-in-picture')
方法二:多video页面精准定位若页面含多个video(如B站主视频+弹幕层+广告位),上述命令只作用于第一个。需先在“元素”面板中右键目标video→选择“复制”→“复制选择器”,例如复制得到video#bilibili-player;回到控制台,将代码替换为:document.querySelector('video#bilibili-player').webkitSetPresentationMode('picture-in-picture')
方法三:防御性执行(防报错)若控制台报错“Cannot read property 'webkitSetPresentationMode'”,说明video尚未加载完成或被JavaScript拦截。可加延时重试:setTimeout(() => { document.querySelector('video')?.webkitSetPresentationMode?.('picture-in-picture') }, 1000)
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
部分网站通过Media Session API接管播放控制,若未正确声明支持画中画,即使video存在也无法触发。第一步必须开启开发菜单:点击菜单栏Safari→偏好设置→高级→勾选“在菜单栏中显示开发菜单”。
第二步:点击菜单栏“开发”→“JavaScript 控制台”→输入以下命令验证媒体会话是否激活:navigator.mediaSession.playbackState
若返回"playing",说明媒体会话已就绪;若返回"none",表明网站未初始化Media Session,此时画中画大概率不可用,需联系网站方修复。
第一步:视频必须处于播放状态,暂停状态下Command+Option+P无效。
第二步:浏览器标签页必须获得系统焦点,不能在后台运行或被其他窗口完全遮挡。
第三步:【视频元素必须获得DOM焦点——点击视频画面一次,看到浅蓝色聚焦边框才代表成功】。没有这一步,快捷键100%无响应。
Safari不提供chrome://settings类的图形化白名单入口,但可通过终端命令临时授权:
打开终端→输入以下命令并回车:defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2AllowsPictureInPicture -bool YES
然后重启Safari。该命令全局启用PiP权限,对所有站点生效,无需逐个添加域名。
相关文章
如何排查HTML连续空格显示异常问题
怎样在vivo浏览器中禁止网页自动调用位置信息?
怎样开启宙斯浏览器的硬件加速功能提升渲染速度
如何解决UC浏览器网页视频加载缓慢不断转圈的问题?
如何让悟空浏览器在不同设备间同步密码库?
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
如何用纯CSS解决各大移动浏览器Retina屏幕下1px边框变粗问题?
2026-10-06 10:17
怎么在Python中使用NumPy实现数据对数变换
怎样在PostgreSQL中使用PERCENTILE_CONT计算精确分位数
如何在SCSS中跳出父级嵌套输出根级CSS选择器?
2026-10-06 10:18
怎样设置百度浏览器在关闭时自动清空上网痕迹?
2026-10-06 10:19
怎样利用PostCSS插件自动检测和修复不合规的BEM类CSS?
百度浏览器如何恢复丢失的网页右下角控制小图标?
如何在CSS表单验证组件中正确定义BEM修饰符?
2026-10-06 10:21
怎样在测试环境中利用Testcontainers模拟MongoDB事务回滚?
如何在CSS中用Grid实现交错不对称杂志风布局
热门AI工具
一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。
火山引擎是一款面向企业的云计算与AI服务平台。
切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。
一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。
一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。
一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。
PixTV是一款面向AIGC内容创作的AI视频生成工具。
豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。
DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。
相关专题
本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。
0
2026.10.08
本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。
120
2026.09.30
本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。
100
本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。
80
需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。
PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。
2026.09.29
本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。
300
2026.09.23
本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。
180
本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。
140
热门下载
相关下载
精品课程
共0课时 | 0人学习
共6课时 | 12.1万人学习
共79课时 | 161.1万人学习
共6课时 | 54.6万人学习
最新文章
微信扫码关注PHP中文网服务号
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn
返回顶部