使用 Javascript 中的 API 最大限度地提高 YouTube 视频的质量

Question

我正在为一个多机位网站做一个小项目，我想知道是否使用 YouTube API 可以使视频以预定义的方式显示并具有尽可能高的质量。该程序非常简单，我添加了 javascript 代码，看看使用过该程序或了解该主题的人是否可以帮助我。

这是代码：

    "https://www.youtube.com/embed/FTw5xuq2swo?si=FEoxfsIQhmr4cu",
    "https://www.youtube.com/embed/Rg7kw-KLDL8?si=pABas8BsqLuQnP",
    "https://www.youtube.com/embed/uH1W01t_lGc?si=chERPVJdUGf-Q",
    "https://www.youtube.com/embed/Mu-dvOOnaOw?si=nckTPbwRLvVVqF",
    "https://www.youtube.com/embed/c212qMUTnEs?si=_bkJR78x2cX9FX",
    "https://www.youtube.com/embed/uH1W01t_lGc?si=4UxhxVaVJpspE1_",
    "https://www.youtube.com/embed/RsIG9WF-B4s?si=ETIOowVKEUaDBX",
    "https://www.youtube.com/embed/qw3uaLRrYNY?si=0epReb6olWaEP9",
    "https://www.youtube.com/embed/OWCh3wmKtak?si=t3fjj5cE90Gv",
];

function createIframes(videoUrls) {
    const videoGrid = document.getElementById('videoGrid');
    videoUrls.forEach((url, index) => {
        const iframeContainer = document.createElement('div');
        iframeContainer.id = 'player' + index;
        iframeContainer.className = 'grid-item';
        videoGrid.appendChild(iframeContainer);
    });
}

createIframes(videoUrls);

function onYouTubeIframeAPIReady() {
    videoUrls.forEach((url, index) => {
        new YT.Player('player' + index, {
            height: '100%',
            width: '100%',
            videoId: extractVideoID(url),
            playerVars: {
                'autoplay': 1,
                'mute': 1
            }
        });
    });
}

function extractVideoID(url) {
    const urlObj = new URL(url);
    return urlObj.searchParams.get('v') || urlObj.pathname.split('/').pop();
}

document.addEventListener("DOMContentLoaded", function() {
    const videoGrid = document.getElementById('videoGrid');

    const numVideos = videoUrls.length;
    const numCols = Math.ceil(Math.sqrt(numVideos));
    const numRows = Math.ceil(numVideos / numCols);

    videoGrid.style.gridTemplateColumns = `repeat(${numCols}, 1fr)`;
    videoGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
});```

Answer 1

我稍后注意到你的问题，并想为你提供一些帮助。不幸的是，您可能已经注意到，YouTube 的 iFrame 或 Embed API 中没有此功能。从 YouTube 获得最大质量的最佳方法是创建一个后端服务器，能够提供流服务并获取视频数据（youtubei.js 模块就是为此而设计的，我经常使用它，它基本上可以让您访问 YouTube YouTube 本身使用的 API）并使用服务器来获得最高的流质量。但请记住，视频和音频是独立的流，因此您应该考虑将这些流合并在一起或使用不同的方法同时传输这两个流。但如果您确实不需要额外的高质量，也可以使用重新混合的流（通常具有 480p 左右，在一个流中同时包含音频和视频）。

https://github.com/LuanRT/YouTube.js自己看一下，如果我没记错的话浏览器版本也是支持的