Livid
403.84D
562.84D
V2EX  ›  浏览器

macOS 或者 Windows 上用什么方法可以让一个网站像这个视频里这样显示在一个无边框的窗口里?

  •  
  •   Livid ·
    PRO
    · Dec 16, 2024 · 11777 views
    This topic created in 688 days ago, the information mentioned may be changed or developed.
    47 replies  •  2024-12-18 02:12:16 +08:00
    DeWjjj
    DeWjjj
    PRO
    Dec 16, 2024
    1
    这个网站好像也只是视频吧,看到里面的 mpeg 资源,点进去就是一个大号的视频播放。
    ThinkMan
    ThinkMan
    Dec 16, 2024 via iPhone
    2
    ARC 浏览器不行吗
    xuld
    xuld
    Dec 16, 2024
    3
    任何网站都可以安装成 app ,然后启动 app 后就像软件一样,单独一个窗口,看不出是网站的感觉。
    以 edge 为例,先点击浏览器地址栏右侧的“安装为应用”,新建开始菜单的快捷方式,然后点击创建的快捷方式,就可以看到独立窗口的网页
    sleepm
    sleepm
    Dec 16, 2024
    5
    画中画
    Picture-in-Picture
    pip
    爱奇艺网页也可以
    sleepm
    sleepm
    Dec 16, 2024
    6
    网页的播放器如果不支持
    播放的时候,chrome 右上角可以也有按钮可以进入画中画模式
    Erniu
    Erniu
    Dec 16, 2024
    7
    我记得低版本的 macOS 有一个桌面小组件,好像是类似的功能
    CSGO
    CSGO
    Dec 16, 2024
    8
    视频里的效果我认为是用的“Screen Studio”录制的,可能软件可以实现这样的效果,就像截图工具“CleanShot X”一样,会有裁剪成边和加背景等效果。而实际它上贴着网页边缘录屏而已(我软件试用过期了,没有实际验证)
    ysc3839
    ysc3839
    Dec 16, 2024 via Android❤️1
    9
    用 Electron 或者类似项目创建个无边框窗口即可
    kuanat
    kuanat
    Dec 16, 2024
    10
    我只用 Linux 所以只能提个思路,这个功能在 linux 异常简单。

    现代桌面的窗口管理器的渲染逻辑是基本一致的,就是分配给应用程序一个矩形空间,由应用程序决定窗体内部的内容,然后窗口管理器(合成器)负责将其和标题栏部分合成起来。换个说法,标题栏不是应用程序决定的。

    为了支持特定形态的窗体,一般桌面的窗口管理器也会提供一个叫 client side decoration 的机制,这样窗体相关的部分也交由应用程序负责。可以参考 https://en.wikipedia.org/wiki/Client-side_decoration

    所以要实现这个功能一方面需要窗口管理器支持,另一方面要程序自身去适配 csd 机制。


    如果只是单纯实现录屏的时候不含窗体,计算好坐标裁剪一下应该没问题。
    evan9527
    evan9527
    Dec 16, 2024
    11
    看看 MenubarX 是否满足
    v2gba
    v2gba
    Dec 16, 2024❤️1
    12
    如果是自己的网站的话
    做 PWA 支持
    然后在 manifest 里定义 borderless 模式
    https://github.com/WICG/manifest-incubations/blob/gh-pages/borderless-explainer.md#manifestjson

    (但一般是给本身自带 menu 的网站用的)
    HeyWeGo
    HeyWeGo
    Dec 16, 2024❤️3
    13


    windows 下,这是 chrome 的无边框模式,运行如下命令即可:

    "C:\Program Files\Google\Chrome\Application\chrome.exe" --chrome-frame --app=https://www.v2ex.com

    我把 chatgpt 等工具类网站都弄了个这种运行模式
    HeyWeGo
    HeyWeGo
    Dec 16, 2024
    14
    在没有辅助软件的情况下,浏览器能做到的应该就这样了。否则只能自己写点小小软件实现了
    littleshy
    littleshy
    Dec 16, 2024
    15
    我喜欢用 chrome 的 --app 参数创建一堆快捷方式打开浏览器,不过无法到全部无边框,还是会有一个标题栏。
    Takashi123
    Takashi123
    Dec 16, 2024
    16

    Chrome 的一个插件,还是有个关闭的菜单栏
    Livid
    Livid
    MOD
    OP
    PRO
    Dec 16, 2024
    18
    Edge App 的效果:



    如果能够把最上面的那两栏去掉就好了。

    我先试试 manifest 能够做到什么程度。
    NessajCN
    NessajCN
    Dec 16, 2024
    19
    zen browser
    compact mode
    hguandl
    hguandl
    Dec 16, 2024❤️1
    20
    可以简单粗暴地实现一个 WKWebView ,然后把标题工具栏去掉。但是副作用是整个窗口都是网页,甚至无法移动位置了。

    https://imgur.com/a/pUKUzna
    1145148964
    1145148964
    Dec 16, 2024
    21
    powertoy 好像有个窗口剪裁
    sleepm
    sleepm
    Dec 16, 2024
    22
    https://github.com/Codeusa/Borderless-Gaming
    除了好看没啥了
    没了边框,不能双击放大,快捷键放大
    wow0o
    wow0o
    Dec 16, 2024
    23
    @ThinkMan #2 arc 起新服了。 不玩了
    mgrddsj
    mgrddsj
    Dec 16, 2024❤️1
    24
    如果你有 Firefox 的话,试试下面这个 Reddit 帖子里的方法:
    https://www.reddit.com/r/FirefoxCSS/comments/lhoh0b/is_there_a_way_to_hideshow_all_ui_elements_and/

    实测效果:
    evan9527
    evan9527
    Dec 16, 2024
    25
    flotato
    hguandl
    hguandl
    Dec 16, 2024❤️1
    26
    #20 移动问题也解决了,在上面加了个透明层。

    Demo:
    mgrddsj
    mgrddsj
    Dec 16, 2024❤️1
    27
    如果你偏好 Chromium 系的浏览器,那么 Vivaldi 也可以做到,只需要开启 Vivaldi 的允许修改 CSS 开关,并添加以下帖子里的 CSS ,再 "Hide UI" (Ctrl/Command + F10),即可做到下图效果。
    (某个版本的 Vivaldi 转向使用原生红绿灯按钮,使其无法被隐藏,Windows 上应该没有这个问题)
    https://www.reddit.com/r/vivaldibrowser/comments/nbgjtq/how_to_remove_the_title_bar/

    timjuly
    timjuly
    Dec 16, 2024
    28
    效果最好的应该就是浏览器直接全屏,然后录制完了再剪辑,加个背景
    xxmym
    xxmym
    Dec 16, 2024
    29
    safari 可以做到丐版效果
    jwwweiii
    jwwweiii
    Dec 16, 2024
    30
    最近我也遇到了个问题,画中画播放怎么样能显示进度条
    cat
    cat
    Dec 16, 2024❤️1
    31
    标题中大大的“无边框”三个字,为啥楼上贴了那么多有边框的图……
    lingyired
    lingyired
    Dec 16, 2024
    32
    我偶尔有类似的需求,就是希望 B 站的视频小窗口的时候同时显示弹幕
    FringJX
    FringJX
    Dec 16, 2024
    33
    Arc 浏览器亲测可以达到 99%,把侧边栏隐藏就行了,只不过有个内边距
    czwen1993
    czwen1993
    Dec 16, 2024
    34
    有没有可能,这是一个视频剪辑的。视频上面有鼠标光标
    nicoljiang
    nicoljiang
    Dec 16, 2024
    35
    这是 https://screen.studio/录的视频效果
    LAMBO
    LAMBO
    Dec 16, 2024
    36
    [上传图片中...] mac app:focusee
    jspatrick
    jspatrick
    Dec 16, 2024
    37
    electron 套个壳,做个首页输入地址,任何网页都能无边框
    jhdxr
    jhdxr
    Dec 16, 2024
    38
    xuanbg
    xuanbg
    Dec 16, 2024
    39
    vm?
    Leon6868
    Leon6868
    Dec 16, 2024
    40
    这应该只是视频效果吧,不过如果 Livid 想在实际应用中做出这个效果,应该尝试 Document Picture in Picture API 。Bilibili 已经在他们的”稍后播放“功能中应用了,效果类似 #18 去掉地址栏。

    Demo: https://mdn.github.io/dom-examples/document-picture-in-picture/
    Solix
    Solix
    Dec 16, 2024 via iPhone
    41
    screen studio ,鉴定完毕,这么出名的录制工具大家都没用过?
    szdosar
    szdosar
    Dec 16, 2024 via iPhone
    42
    F11 的魔法
    xsldebugger004
    xsldebugger004
    Dec 16, 2024
    43
    这不是 F11 ,全屏模式吗? web 有 API ,用户必须与页面或 UI 元素进行交互才能使用此功能。

    https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen
    icaolei
    icaolei
    Dec 16, 2024❤️1
    44
    Zen-browser 用 Alt+Ctrl+C 快捷键开启紧凑模式可以。
    varharrie
    varharrie
    Dec 17, 2024
    45
    korvin
    korvin
    Dec 18, 2024
    46
    @cat #31 我也纳闷了,现在人的理解和读图能力这么差了
    korvin
    korvin
    Dec 18, 2024❤️2
    47
    看这个录屏里的鼠标样式和页面缩放动效 100% 是 macOS 上的 s creen studio 录制效果。我录了个 DEMO ,背景都一样
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2452 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 89ms · UTC 15:19 · PVG 23:19 · LAX 07:19 · JFK 10:19
    ♥ Do have faith in what you're doing.