0

0

谷歌浏览器如何开启画中画模式 谷歌浏览器视频小窗播放功能设置

冰火之心

冰火之心

发布时间:2025-11-26 11:15:06

|

798人浏览过

|

来源于php中文网

原创

1、可通过右键菜单、视频按钮、开发者工具或扩展程序启用谷歌浏览器画中画功能,支持YouTube、Bilibili等网站;2、右键点击视频选择“画中画”即可悬浮播放;3、部分网站播放器自带画中画按钮,点击即可进入小窗模式;4、使用F12打开控制台,输入document.querySelector('video').requestPictureInPicture()可强制启用;5、安装如“Floating for YouTube”等扩展可增强兼容性并自定义设置。

谷歌浏览器如何开启画中画模式 谷歌浏览器视频小窗播放功能设置

如果您在观看网页视频时希望同时进行其他操作,可以启用谷歌浏览器的画中画功能,让视频以小窗口形式悬浮播放。该功能支持大多数主流视频网站,如 YouTube、Bilibili 等。

本文运行环境:Dell XPS 13,Windows 11

一、通过视频右键菜单开启画中画

部分网站的视频支持直接通过鼠标右键调出画中画选项,这是最快速的启用方式。

1、在谷歌浏览器中打开视频页面并开始播放视频。

2、将鼠标指针悬停在视频画面上,点击鼠标右键。

3、在弹出的上下文菜单中选择“画中画”选项。

4、视频窗口将脱离页面,以可移动的小窗模式继续播放。

二、使用网页视频控制按钮开启

某些网站会在视频播放器内嵌画中画按钮,用户可通过点击该按钮直接启用小窗播放。

1、播放视频后,将鼠标移动到视频播放区域上方。

2、查找视频控制栏中的“画中画”图标(通常为两个重叠的矩形窗口)。

3、点击该图标,视频将自动进入画中画模式。

4、拖动小窗可在屏幕任意位置调整播放窗口位置。

Article Forge
Article Forge

行业文案AI写作软件,可自动为特定主题或行业生成内容

下载

三、通过开发者工具强制启用画中画

对于未提供画中画按钮但技术支持的视频元素,可通过执行 JavaScript 命令手动触发。

1、在视频播放状态下,按下 F12 打开开发者工具

2、切换到“Console”(控制台)标签页。

3、输入以下代码并回车执行:document.querySelector('video').requestPictureInPicture()

4、若页面存在多个视频元素,需指定正确的 video 标签索引或类名。

四、安装扩展程序增强画中画功能

部分浏览器扩展可为不支持画中画的网站添加兼容性支持。

1、访问 Chrome 应用商店,搜索“画中画”扩展程序,如 “Floating for YouTube” 或 “Video in Picture”。

2、选择评分高且更新频繁的扩展,点击“添加至 Chrome”进行安装。

3、安装完成后,播放视频时扩展图标会亮起,点击即可启动画中画模式。

4、通过扩展设置可自定义窗口大小、默认位置及快捷键。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

1059

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

840

2023.11.06

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

420

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

541

2024.05.29

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1496

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1170

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

836

2023.08.01

windows查看端口被占用的情况
windows查看端口被占用的情况

windows查看端口被占用的情况的方法:1、使用Windows自带的资源监视器;2、使用命令提示符查看端口信息;3、使用任务管理器查看占用端口的进程。本专题为大家提供windows查看端口被占用的情况的相关的文章、下载、课程内容,供大家免费下载体验。

463

2023.08.02

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

37

2026.03.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号