全部分类
秋婷君_5587
2026-10-06
410人浏览
原创
根本原因是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页面中修改文字排版方式
HTML object标签怎么实现双向数据通信
HTML表单失焦时怎么触发字段校验
HTML object标签常用属性及用法解析
HTML怎么排版有序列表文字
PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:火狐浏览器地址栏如何设置搜索关键词快捷方式
下一篇:搜狗搜索APP怎么使用微信搜索查找公众号文章
作者最新文章
遇到网页右键菜单被网页代码禁用时米侠浏览器如何破解?
谷歌浏览器提示此扩展程序未在应用商店上架怎么继续启用?
如何在悟空浏览器中开启无痕浏览模式保护隐私?
如何利用edge浏览器内置的Web选择工具抓取网页表格?
为什么百度浏览器无法正常加载部分网页的CSS样式布局?
如何设置米侠浏览器退出时自动清理浏览记录与缓存?
宙斯浏览器页面缩放比例异常变小怎样恢复默认尺寸?
怎样在Safari浏览器中一键清理搜索历史记录与浏览足迹
怎么解决edge浏览器在Linux系统下无法输入中文的问题?
米侠浏览器如何开启网站桌面通知与权限精细化管理?
热门AI工具
SkildArt
豆包大模型
PixTV
切问学术
AionClaw
Loomy
音述AI
DeepSeek
相关专题
本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。
2026.09.30
80
10
本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。
14
本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。
40
12
需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。
26
PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。
2026.09.29
60
15
本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。
2026.09.23
280
本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。
160
本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。
120
本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。
2026.09.22
热门下载
相关下载
精品课程
共0课时 | 0人学习
共6课时 | 54.6万人学习
共89课时 | 133.4万人学习
共49课时 | 82.2万人学习
共22课时 | 2.4万人学习
共31课时 | 3.4万人学习
共28课时 | 4.4万人学习
最新文章