使用mpv播放网页中的视频

契机

Linux下的Chrome播放视频不支持硬件加速。虽然Firefox可以支持，但是平时还是用Chrome多一点。配置视频地址解析是可以让MPV来播放的，正好mpv还内置了调用yt-dlp来处理视频地址解析，youtube和B站都支持，那正好试一下吧。

配置

mpv开启硬件加速。对于Intel核心显卡，配置文件~/.config/mpv/mpv.conf中添加如下内容：

# 启用硬件解码
hwdec=vaapi
# 指定视频输出后端（可选尝试不同组合）
vo=gpu
# 可选：针对某些场景优化
profile=gpu-hq

下载最新版本的yt-dlp，因为旧版可能已经无效。我目前下载的版本是2025.02.19，放到了/usr/local/bin/下。

设置yt-dlp的配置文件~/.yt-dlp/config，其实是支持多个配置地址的，我选了这个地址。

--proxy 127.0.0.1:8118
--cookies-from-browser chrome

给mpv设置yt-dlp的相关内容，加在配置文件~/.config/mpv/mpv.conf中

# 设置yt-dlp的文件位置
script-opts=ytdl_hook-ytdl_path=/usr/local/bin/yt-dlp
# 设置格式，我这边是Intel UHD Graphics 630，所以选择优先mp4和webm，最大1080p，编码vp9,hevc,h264,h265这些，因为av1不支持啊
ytdl-format="(mp4,webm)bestvideo[height<=1080][vcodec~='^(vp9|(he|a)vc|h26[45])']+bestaudio/best"
# 这边重复设置一遍代理
ytdl-raw-options-append=proxy=http://127.0.0.1:8118

播放网址的时候，把https://协议改成ytdl://，强制使用yt-dlp来解析视频地址。

如果要在浏览器呼起mpv，只要给xdg-open注册ytdl://协议，新建~/.local/share/applications/ytdl.desktop，内容如下：

[Desktop Entry]
Name=Ytdl Handler
Exec=/usr/bin/mpv %u
Type=Application
MimeType=x-scheme-handler/ytdl;

然后执行update-desktop-database ~/.local/share/applications/更新数据库。

最后只要让浏览器打开ytdl://的链接就可以了。最简单收藏夹放一个js代码来替换。

javascript:(function() {window.location.href=window.location.href.replace(/^https?/,"ytdl");})();

要体验更好可以写油猴脚本甚至浏览器插件。
搞了一个右键超链接菜单的油猴脚本，如下

// ==UserScript==
// @name         自定义右键菜单（油猴版）
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  右键点击超链接时，显示自定义菜单（复制、打开、新标签页等）
// @author       ChatGPT
// @match        *://www.youtube.com/*
// @match        *://www.bilibili.com/*
// @grant        GM_setClipboard
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    let customMenu = null; // 存储菜单元素

    document.addEventListener("contextmenu", function(event) {
        let target = event.target.closest("a"); // 只对超链接生效
        if (!target) return;

        event.preventDefault(); // 阻止默认右键菜单
        createCustomMenu(target.href, event.pageX, event.pageY);
    });

    function createCustomMenu(link, x, y) {
        removeCustomMenu(); // 先删除旧的菜单

        // 创建菜单容器
        customMenu = document.createElement("div");
        customMenu.style.position = "absolute";
        customMenu.style.top = y + "px";
        customMenu.style.left = x + "px";
        customMenu.style.background = "white";
        customMenu.style.border = "1px solid #ccc";
        customMenu.style.boxShadow = "2px 2px 5px rgba(0,0,0,0.2)";
        customMenu.style.padding = "5px 0";
        customMenu.style.borderRadius = "5px";
        customMenu.style.fontSize = "14px";
        customMenu.style.zIndex = "10000";
        customMenu.style.cursor = "pointer";

        // 菜单项数据
        let items = [
            { text: "▶️ 使用MPV播放", action: () => { window.location.href=link.replace(/^https?/,"ytdl"); } },
        ];

        // 创建菜单项
        items.forEach(item => {
            let menuItem = document.createElement("div");
            menuItem.textContent = item.text;
            menuItem.style.padding = "8px 15px";
            menuItem.style.whiteSpace = "nowrap";
            menuItem.style.color = "#333";
            menuItem.style.background = "white";

            // 悬停效果
            menuItem.onmouseover = () => menuItem.style.background = "#f0f0f0";
            menuItem.onmouseout = () => menuItem.style.background = "white";

            // 绑定点击事件
            menuItem.onclick = () => {
                item.action();
                removeCustomMenu();
            };

            customMenu.appendChild(menuItem);
        });

        document.body.appendChild(customMenu);

        // 点击其他地方隐藏菜单
        document.addEventListener("click", removeCustomMenu);
    }

    function removeCustomMenu() {
        if (customMenu) {
            customMenu.remove();
            customMenu = null;
            document.removeEventListener("click", removeCustomMenu);
        }
    }
})();

最后修改于 2025-03-02