Get youtube animated thumbnail

问题

Is that a way to embed the animated thumbnail from youtube in my website? I am not talking about the static thumbnail but the one that looks like a gif. The animated thumbnail of more or less 3 seconds

Thanks

回答1:

As of June 2019:

1. Getting static thumbnail images is straightforward

• They're exposed through the YouTube API and, even better, they follow a very simple and uniform URL structure (more details here).

2. Youtube's animated thumbnails are supported in a limited number of browsers.

• Apparently, desktop browsers Chrome and Opera (source)
• The thumbnails, btw, are in WebP image format, which has a wider browser support.

3. Getting animated thumbails for a limited number of videos is relatively easy.

You can, for example, inspect the network activity in your browser dev tools (more details for Chrome).

With the network panel open, visit a page listing that includes the desired video, clear the network activity (you can also select 'Img' to display only activity related to images) and hover the desired video. Then just right click on the desired resource and copy the url.

In case an image helps...

The urls of the animated thumbnails look like the following:

https://i.ytimg.com/an_webp/zdOmNiXvM3w/mqdefault_6s.webp?du=3000&sqp=CPDloOgF&rs=AOn4CLD9rYflZAMK6qBIbYJDoQZLk9UARw

4. As far as I know, it is currently not possible to get the animated thumbnails programmatically (without webscraping)

• In other words, given a video ID, it is currently not possible to get the animated thumbnail URL through the API or a defined URL pattern.

---

PS.: Hoping that somebody can prove me wrong on point #4, here are a few examples of those URLs:

https://i.ytimg.com/an_webp/zdOmNiXvM3w/mqdefault_6s.webp?du=3000&sqp=CPDloOgF&rs=AOn4CLD9rYflZAMK6qBIbYJDoQZLk9UARw

https://i.ytimg.com/an_webp/oIIDZq4nZpo/mqdefault_6s.webp?du=3000&sqp=CLyqoegF&rs=AOn4CLD9DyqMoxBTiOPTUX8FQJmUfiu8NA

https://i.ytimg.com/an_webp/X9tU8ybzcFs/mqdefault_6s.webp?du=3000&sqp=CLHroOgF&rs=AOn4CLAX8j6uWUko_54aPJLwkbAe_cUR3w

Changing the video ID or other parameters does not return a valid thumbnail.

回答2:

I don't know if it will help you

but when you go to search page in youtube you can access the object

window.ytInitialData

Here we have node called: window.ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents["0"].itemSectionRenderer.contents[2].videoRenderer.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails["0"].url

maybe you can find a way to retrieve this data

access search page like this and: https://www.youtube.com/results?search_query=USPwv1zwWV4 What I have tried in console:

let videos = window.ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents["0"].itemSectionRenderer.contents;


if (!videos.length) { // includes other renderers i.e: "did you mean ..."
    console.log('no videos in search'); 
    //return;
}

let video = videos.filter( v => v.videoRenderer && v.videoRenderer.videoId == "USPwv1zwWV4")

if (!video.length) { 
    console.log('no video by that ID in search'); 
    //return;
}

let thumbs = video[0].videoRenderer.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails;

if (!thumbs.length) { 
    console.log('no moving thumbs for that video'); 
    //return;
}

console.log(thumbs[0].url);

回答3:

Gifs.com has a free API for generating water-marked gifs from a media-related URL.

https://gifs.com/dashboard/api

It doesn't explicitly mention it but it does in fact accept Youtube URLs and generates a preview from them.

Here's an example of how to use it with cURL

curl -XPOST -H "Content-type: application/json" -d '{ "source": "https://www.youtube.com/watch?v=74KxwkLjE9E" }' 'https://api.gifs.com/media/import'

It takes about a minute or two to generate so if you store/cache the gifs with a server you could create your own personal preview generator.

Here's the archived link to the documentation https://web.archive.org/web/20190408212718/http://docs.gifs.com/docs/authentication-key

来源：https://stackoverflow.com/questions/47084113/get-youtube-animated-thumbnail