How to get YouTube moving thumbnail

shaziaijaz commented 3 years ago

How to get YouTube moving thumbnail
https://i.ytimg.com/an_webp/wTzTyVpgytk/mqdefault_6s.webp?du=3000&sqp=CNjqooEG&rs=AOn4CLAx64ao7CbvmV6IzxKOK4pjNnyeVA

johtso commented 3 years ago

The animated thumbnails are only added to the DOM when the mouse is hovered over the thumbnail, but the urls are included in a javascript variable in a script tag in the body of the page.

Easiest approach to extract the matching animated thumbnail urls from the page would be with a regex something like this:

"(http.+/an_webp/the_video_id/.+)"

HermanFassett commented 3 years ago

Nice, I'll look into it at some point, feel free to pull request if you figure it out

johtso commented 3 years ago

Ah, I see you're already using the ytInitialdata object. It should be in there as this:

"richThumbnail": {
    "movingThumbnailRenderer": {
        "enableHoveredLogging": true,
        "enableOverlay": true,
        "movingThumbnailDetails": {
            "logAsMovingThumbnail": true,
            "thumbnails": [
                {
                    "height": 180,
                    "url": "https://i.ytimg.com/an_webp/mX_fQyxKiPQ/mqdefault_6s.webp?du=3000&sqp=CKylo4MG&rs=AOn4CLAJhoHhnxxaA_M2UDkLjamaqy4ViQ",
                    "width": 320
                }
            ]
        }
    }
}

geanramos commented 7 months ago

Sou do Brasil - pt-BR consegui resolver parte do problema. meu codigo esta abaixo. precisa de melhorias

Salve o codigo abaixo em uma pagina PHP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria de Imagens</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .gallery-item {
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .gallery-item img {
            width: 100%;
            height: auto;
            display: block;
        }
        .gallery-item a {
            text-decoration: none;
            color: #333;
            display: block;
            padding: 10px;
            background-color: #fff;
            text-align: center;
        }
        .gallery-item a:hover {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Galeria de Imagens</h1>
        <div class="gallery">
            <?php
            // URL do canal do YouTube
            // https://www.youtube.com/channel/UC43nsQHUiTT2na67yM796HQ/videos
            $url = 'https://cdn.jsdelivr.net/gh/geanramos/files/yt2.html';

            // Obtendo o conteúdo da página
            $html = file_get_contents($url);

            // Inicializando uma string para armazenar as URLs das imagens
            $image_urls = "";

            // Encontrando todas as URLs das imagens na página usando expressões regulares
            preg_match_all('/https:\/\/i\.ytimg\.com\/an_webp\/([^\/]+)\/mqdefault_6s\.webp\?du=3000\\\\u0026sqp=([^\\\\]+)\\\\u0026rs=([^_]+)_([^"]+)/', $html, $matches);

            // Exibindo as URLs das imagens
            foreach ($matches[0] as $url) {
                // Corrigindo a formatação das URLs substituindo '\u0026' por '&'
                $url = str_replace('\\u0026', '&', $url);
                // Separando a URL antes da vírgula
                $url_parts = explode(',', $url);
                // Obtendo o ID da imagem
                $image_id = $url_parts[0];
                // Exibindo a imagem na galeria
                echo '<div class="gallery-item">';
                echo '<a href="' . $url_parts[0] . '">' . '<img src="' . $url_parts[0] . '" alt="Imagem ' . $image_id . '">' . '</a>';
                echo '</div>';
            }
            ?>
        </div>
    </div>
</body>
</html>

geanramos commented 7 months ago

A demonstração esta aqui https://gean.me/img-gif

HermanFassett / youtube-scrape

How to get YouTube moving thumbnail #61