Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to get YouTube moving thumbnail #61

Open
shaziaijaz opened this issue Feb 14, 2021 · 5 comments
Open

How to get YouTube moving thumbnail #61

shaziaijaz opened this issue Feb 14, 2021 · 5 comments
Assignees
@HermanFassett
Labels
enhancement

Comments

@shaziaijaz
Copy link

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

johtso commented Apr 4, 2021

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
Copy link
Owner

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

@HermanFassett HermanFassett self-assigned this Apr 5, 2021
@johtso
Copy link

johtso commented Apr 5, 2021

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
Copy link

geanramos commented Mar 20, 2024 •
edited

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@HermanFassett HermanFassett

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@johtso @geanramos @HermanFassett @shaziaijaz