获取缩略图上的视频预览链接 [ Youtube ] [英] get link to video preview on the thumbnails [ Youtube ]

问题描述

在 Youtube 中，当用户将光标悬停在视频缩略图上时，视频缩略图开始播放简短预览.仅适用于台式机.

In Youtube, video thumbnails started to play a short preview when one hovered their cursor over them. Works only on desktop .

我试图获得一个链接

 https://i.ytimg.com/an_webp/d1w3CWfhzNQ/mqdefault_6s.webp?du=3000&sqp=CPyAhNIF&rs=AOn4CLBqWnVyWD9F_P4j_WFk7LAGs4pNUA

它只适用于上面的视频，当我尝试更改链接中的 id 以查看另一个视频时不起作用，那么如何获得 id 相关链接以进行视频预览?

It works only for the above video, When I try to change the id in the link to view another video does`t work so how can I get a id dependent link for video preview?

推荐答案

我在下面编写了一个示例 javascript 函数，用于抓取视频 webp 预览.它返回一个承诺，如果找到则返回 url，否则视频没有可用的预览，或者这意味着当您运行此功能时，Youtube 更改了他们的网站 html 格式，导致该功能不再工作(这肯定会发生在在未来的某个时间点，所以如果你在你的网站的生产中使用这个功能，一定要建立一个检查，定期验证该方法是否仍然有效.如果它停止工作，它可能只需要稍作改动即可再次工作)

I wrote an example javascript function below that scrapes the video webp preview. It returns a promise that returns the url if found, otherwise the video has no preview available OR it means that by time you are running this function, Youtube changed their website html format which caused the function to not work anymore (this will definitely happen at some point in the future, so if you use this function in production on your site, be sure to also build a check that periodically verifies if the method still works. If it ever stops working, it might just need a minor change to work again)

承诺在一秒左右后给出结果；并且有几个点可能会出错并且不返回预览，因此请确保不要让您的网站用户体验依赖于它以始终返回预览.

The promise gives a result after a second or so; and there's several points where it can go wrong and not return a preview, so make sure to not make your website UX dependent on it to always return a preview.

更好的是在后端运行代码，并将图像保存在后端.(不过我不确定这是否违反 Youtube 的版权规则)

Even better would be to run the code on your backend, and save the image on the backend. (However I'm not sure whether this is against Youtube's copyright rules)

const youtubeAnimation = id => {
    return fetch(
        `https://cors-anywhere.herokuapp.com/https://www.youtube.com/results?search_query=${id}&sp=QgIIAQ%253D%253D`,
        { headers: {} }
    )
        .then(r => r.text())
        .then(html => {
            const found = html.match(
                new RegExp(`["|']https://i.ytimg.com/an_webp/${id}/(.*?)["|']`)
            );
            if (found) {
                try {
                    const url = JSON.parse(found[0]);
                    return url;
                } catch (e) {}
            }
            throw "not found";
        })
        .catch(e => {
            return false;
        });
};

示例调用:

youtubeAnimation('s86-Z-CbaHA').then(console.log)

说明:

1. 以视频 ID 作为搜索查询，获取实际的 Youtube 搜索结果页面.URL 参数 &sp=QgIIAQ%253D%253D 用于强制执行查询的精确匹配.
2. 我在 Heroku 上使用通用代理来规避 CORS 封锁.这是在浏览器中运行该功能所必需的.
3. 在整个 html 中搜索我们正在寻找的 webp 文件格式(包括我们的视频 ID)
4. 如果找到，则将其解析为 JSON(图像位于 html 中某处的 JSON 中).否则返回 false.

这篇关于获取缩略图上的视频预览链接 [ Youtube ]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！