Привет! Итак, сегодня я пересматривал несколько клипов из моего самого любимого фильма «Yeh Jawani Hai Deewani» на Netflix и хотел найти конкретную сцену «Сцена забавной драки на рынке». Но как найти точную временную метку сцены?

Что ж, Netflix здесь, чтобы спасти положение с его причудливыми миниатюрами на панели поиска, которые меняются, когда вы наводите на него курсор, чтобы вы могли найти именно ту сцену, которую ищете.

Разве это не невероятно быстро? ⚡️. Вы когда-нибудь задумывались, как им удается это волшебство? Давайте погрузимся и изучим, не так ли?

Итак, будучи любопытным инженером (или, по крайней мере, мне нравится так думать 😝), я начал думать о возможностях. Вот две мои основные теории:

  1. Вариант первый: Netflix отправляет запрос GET на сервер каждый раз, когда вы наводите курсор на строку поиска. Звучит довольно дорого, не так ли?
  2. Вариант второй: Netflix отправляет запрос GET вместе с кешем. О, классический ход! Наверное, так думает большинство из вас, умных людей. И вы отчасти правы, друзья мои.

Чтобы разгадать эту загадку, я использовал любимый инструмент каждого веб-разработчика — Chrome Devtools! Имея в своем распоряжении вкладку «Сеть», я раскрыл секретный метод извлечения эскизов Netflix.

Приготовьтесь, ребята. Сначала, когда вы наводите курсор на панель поиска и смотрите на вкладку сети, запрос выглядит как обычный запрос GET. Но подождите, подождите… URL-адрес начинается с «blob»!

Эти большие двоичные объекты хранятся в памяти браузера и называются их уникальными идентификаторами. И это, друзья мои, секрет молниеносной смены миниатюр, когда вы наводите курсор на панель поиска. ⚡

Итак, как генерировать такие объекты blob?🧐

Что ж, если вы такой же опытный веб-разработчик, как я 👨🏻‍💻, вы, вероятно, сталкивались с этими каплями раньше — используя функцию URL.createObjectURL() в старом добром ванильном JavaScript. Возможно, вы использовали эту функцию при выборе файла с помощью тега ввода HTML и его предварительном просмотре или при создании кнопки загрузки для загрузки какого-либо приятного контента.

Но даже если вы еще не исследовали мир капель, не бойтесь! У меня есть простое однострочное определение BLOB-объектов. И эй, есть даже код, который вы можете скопировать и вставить, чтобы глубже погрузиться в чудеса URL.createObjectURL() в конце статьи.

Определение: «Blob — это большой двоичный объект, представляющий данные, которые можно использовать для хранения и извлечения данных».

А вот дальше все становится интереснее 💡. Netflix идет дальше и заранее извлекает все эти эскизы, создавая такие объекты blob для хранения в памяти вашего браузера. Я знаю, о чем вы думаете: «Разве это не глупо? Загружать все эти эскизы и загромождать память моего браузера?» У меня были те же мысли! Но эй, вопрос в том,

сколько миниатюр им на самом деле нужно загрузить, чтобы дать нам эту шикарную, сверхбыструю прокрутку?

-› Каждые 10 секунд появляется новая миниатюра, то есть для 3-часового фильма. Если мы посчитаем:-

180*60/10 =› 1080 миниатюр!

Каждая миниатюра имеет размер 10–15 КБ (в среднем 12 КБ).

1080*12 => 12960 КБ ≈ 13 МБ памяти вашего браузера только для миниатюр!

Действительно ли оно того стоит? Мне бы хотелось услышать ваше мнение в комментариях ниже!

Вот и все, друзья мои. Секрет колдовства миниатюр Netflix объяснен во всей его юмористической красе. Теперь вы можете смотреть свои любимые фильмы с новой оценкой закулисной магии, которая делает вашу потоковую передачу такой восхитительной.

Но эй, прежде чем вы исчезнете в очередном киномарафоне, давайте на минутку оценим красоту технологий. Именно эти мелкие детали, такие как молниеносная смена эскизов, напоминают нам, как далеко мы продвинулись. Кто бы мог подумать, что простое наведение курсора на строку поиска может принести столько радости и удобства!?

Итак, в следующий раз, когда вы запустите Netflix, поблагодарите тех умных инженеров, которые воплощают в жизнь ваши мечты о потоковой передаче. И не забудьте сообщить мне в комментариях ниже: какая ваша любимая сцена из фильма, от которой вы не можете отказаться?

Не стесняйтесь связаться со мной в LinkedIn, чтобы обсудить все, что вас интересует, о технологиях, фильмах и т. д.

Кроме того, ознакомьтесь с моим портфолио 3D Pokémon Gesture Controlled, здесь

Наконец, вот некоторый HTML-код, который вы можете скопировать и вставить, чтобы узнать больше о URL.createObjectURL().

<!DOCTYPE html>
<html>

<head>
    <title>Object URL Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        #fileInput {
            display: block;
            margin: 20px auto;
        }

        #previewImage {
            display: block;
            margin: 0 auto;
            max-width: 300px;
            max-height: 300px;
        }
    </style>
</head>

<body>
    <h1>Object URL Example</h1>
    <input type="file" id="fileInput" />
    <img id="previewImage" alt="Preview" />

    <script>
        // Function to handle file selection
        function handleFileSelect(event) {
            var file = event.target.files[0];

            if (file) {
                // Create a blob object from the selected file
                var blob = new Blob([file], { type: file.type });

                // Generate a unique object URL for the blob
                var objectURL = URL.createObjectURL(blob);

                // Set the object URL as the source for the preview image
                document.getElementById('previewImage').src = objectURL;
            }
        }

        // Attach the file input element to the file selection handler
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
    </script>
</body>

</html>