Zautomatyzujmy podmianę miniaturek na YouTube! - ciekawy eksperyment (film, 6m)
Hyperplexed w najnowszym filmie omawia swoje zmagania z projektowaniem miniatur na YouTube. Przyznaje, że nie jest fanem tego procesu, w tym wyboru tekstu i kolorów. Zamiast uczyć się jak poprawić swoje umiejętności, wpadł na pomysł, aby stworzyć bardziej złożone rozwiązanie. Hyperplexed stworzył stronę, która pozwala innym użytkownikom wybierać kolory miniatur, ale z pewnym haczykiem. Żeby odblokować możliwość wyboru koloru, pasek postępu na miniaturze musi osiągnąć 100%. Narzędzie to jest dość kreatywne i zaskakujące, ponieważ wprowadza interaktywność do statycznego obrazu.
W jego opowieści, kluczowym elementem jest interakcja użytkowników z miniaturą. Hyperplexed zaplanował stworzenie prostego interfejsu z przyciskiem i paskiem postępu. Każde kliknięcie przycisku aktualizuje licznik w bazie danych. W filmie wyjaśnia, jak przenieść stan paska postępu z urządzenia na jego miniaturę. Wydaje się, że jest to złożony proces, ale dzięki wykorzystaniu API YouTube oraz Cloud Function, Hyperplexed pokazuje, jak można cyklicznie aktualizować tytuł i miniaturkę filmu.
Zastanawia się, czy można zrobić coś podobnego z miniaturą, co pozwoliłoby na dynamiczne aktualizacje. Właśnie wtedy wkracza Cloudinary, sponsor jego filmu, co czyni proces bardziej automatycznym. Hyperplexed dzieli miniaturą na kilka warstw, co daje mu większą kontrolę nad ich modyfikacjami. Dzięki przetwarzaniu obrazów na wiele warstw, może zmieniać kolory, dodawać tekst i synchronizować stan swojej strony z miniaturą w czasie rzeczywistym.
Gdy postęp paska osiągnie 100%, użytkownicy będą mogli wybierać kolory, a po zakończeniu głosowania miniatura zostanie zaktualizowana zgodnie z najpopularniejszą opcją. Problemem, który może zrujnować ten pomysł, jest limit API YouTube — każda aktualizacja miniatury kosztuje jednostki, a Hyperplexed musi uważać, aby nie przekroczyć limitu. Po złożeniu wniosku, zwiększono jego limit, co początkowo napawało go nadzieją na większą efektywność, jednak szybko natrafił na nowe ograniczenia.
Ostatecznie decyduje się na dostosowanie harmonogramu aktualizacji do co 30 minut, co jest dalekie od jego początkowego planu. Hyperplexed z humorem odnosi się do różnych zgrzytów w trakcie realizacji projektu. Podkreśla, że nawet gdy projekt wydaje się bezsensowny, można nadać mu sens według własnego uznania. Film ma już 230403 wyświetlenia i 16211 polubień w momencie pisania tego artykułu, co wskazuje na pozytywne przyjęcie z jego strony.
Podsumowując, Hyperplexed w tym filmie wprowadza nowatorskie podejście do miniatur, łącząc technologię i interaktywność w jeden fascynujący projekt. Ten kreatywny sposób na zaangażowanie widzów i zmierzenie się z oczekiwaniami oraz ograniczeniami technologii na pewno zainspiruje innych twórców do wprowadzania innowacji dla swoich kanałów.
Toggle timeline summary
-
Prelegent wyraża niechęć do projektowania miniatur i bada rozwiązanie automatyczne.
-
Wprowadzają stronę internetową, która tworzy miniatury, gdzie użytkownicy mogą wybierać kolory.
-
Prelegent omawia techniczne wyzwanie związane z tworzeniem dynamicznego paska postępu w statycznym obrazie.
-
Proponowane jest proste interfejs z przyciskiem i paskiem postępu.
-
Przedstawiono przegląd pobierania bieżącej liczby wyświetleń z API YouTube.
-
Wprowadzany jest proces aktualizacji miniatury, porównując go do pokazu slajdów.
-
Wspominają o używaniu Cloudinary do automatyzacji aktualizacji miniatur.
-
Omówiono różne warstwy dla miniatury, aby umożliwić łatwe modyfikacje.
-
Wyjaśniają, że API Cloudinary pozwala na dynamiczne dostosowania miniatury.
-
Wyjaśniono proces wyboru koloru, który wiąże się z interakcją użytkownika.
-
Omówiono potencjalny problem z limitami kwoty API YouTube jako dużym zmartwieniem.
-
Prelegent dzieli się sukcesem zwiększenia swojego limitu przez Google.
-
Napotyka kolejny problem z błędem limitu, co wpływa na aktualizacje miniatur.
-
Pomimo wyzwań, prelegent dostosowuje swoje plany dotyczące aktualizacji miniatur.
-
Prelegent dziękuje Cloudinary za wsparcie w projekcie.
Transcription
I don't like designing thumbnails. I don't like deciding on the text, and I certainly don't like picking the colors. And yeah, I guess, in theory, I could just learn how to get better at it. But I am a programmer. A problem solver. Which is why I've decided to, instead, spend an inordinate amount of time coming up with a solution that's as difficult and convoluted as humanly possible. You see, rather than having to decide on the color of my thumbnail myself, I created a site that allows you to do that for me. But there's a catch. The only way to unlock the screen that lets you choose a color is by first getting the progress bar on my thumbnail to reach 100%. Now, you might be wondering how it's possible to make a dynamic progress bar inside of a static image. And that, my friends, is an excellent question. So let us begin. The very first thing we're going to need is a way for people to interact with the thumbnail. A simple interface with a button and a progress bar should do just fine. Behind the scenes, every time the button is clicked, we can update a counter in a database. But how do we transfer the current state of the progress bar from our site to our thumbnail? Well, I'm assuming a good chunk of you have already seen this video, where the title always contains the current view count. There are plenty of tutorials on how to achieve this for yourself, but to summarize, it goes something like this. Set up a cloud function to run every few minutes. Every time it runs, it should fetch the current view count from YouTube's API. And if there were changes, call the endpoint to update the title with the new value. The question is, can we do the same thing with a thumbnail? And yeah, according to the documentation, it looks like we can. So in a sense, what this means is that we can turn our video's thumbnail into what is effectively a slideshow. Albeit a very slow slideshow, but we still have a problem. I'm not about to sit here and manually update this slideshow every 5 minutes for the rest of eternity. So instead, we're going to use Cloudinary, who I'd like to thank for sponsoring this video, because they can help us do this step automatically. Back in our function, we can fetch the current count from the database. And before we send a request to YouTube, we need to tell Cloudinary to generate the next slide. But as it stands now, our thumbnail is already a composite image, which doesn't make it very easy to modify the individual components. So what if instead we broke it apart into separate layers? We'd need a base layer, which is just the background, a rectangle for the progress bar, some tick marks to go on top, and we'll save the text layer for later. We can upload these images to Cloudinary, and then reference them via their respective URLs. So technically, if we wanted, we could just fetch the base image as is, send that to YouTube, and be on our way. Or alternatively, we can take advantage of Cloudinary's API to stack these images back into their original form by defining each of them as a new layer. The primary difference is that we can now apply modifications to these layers directly in the URL. We can do anything from cropping and recoloring, to adding a new text layer on top, which means that not only do we have a way to sync the current state of the site with the thumbnail, but we also have a solution to my initial problem, which was allowing you all to be in charge of the color. So how exactly is this color selection process going to work, and why am I only supposed to watch this video if the thumbnail says 100%? Well, if you recall from earlier, the way you make the progress bar go up is by clicking the button on my site. Every 5 minutes, the Cloud Function will generate the next frame via Cloudinary, and then upload it to YouTube. So if you just so happen to click the video when the thumbnail actually read 100%, then you're in luck, because that means the hidden screen on my site has been revealed, which allows anyone to vote on the next color as many times as they'd like. At the end of the voting cycle, the thumbnail will be reset, and the new progress bar will change to whatever option was most popular. And that leaves just one problem remaining, a problem that unfortunately has the potential to ruin this project altogether. If you've ever worked with the YouTube API before, you'll be familiar with their quota system. Every action you perform has an associated cost, which counts towards the default maximum of 10,000 units per day. If each new thumbnail costs us 50 units, that means the most updates we could do is 200, or roughly 1 every 7 minutes, slightly less than what our function is currently set to run. A quick search will tell you that it is possible to get this limit increased, but I was wary of whether or not Google would approve of such a frivolous use case. Even so, I filled out the form and hit submit. After a back and forth that took around 2 weeks, I received their final verdict. Your application has been approved. We've increased your quota to 90,000. This was extremely exciting news, because if I wanted, I now had the option to update the thumbnail once per minute, which was as close to achieving my goal of having a real-time thumbnail as I might expect to get. So, I modified the schedule of my function and set it loose for the next few hours. I began to think I was in the clear when suddenly I encountered another issue. 429, an error code indicating a rate limit. A quick search told me that not only was my plan foiled yet again, but my entire channel was now locked out of thumbnail updates for up to 24 hours, and for a moment I wondered whether I should even bother continuing with this project at all. But then I remembered that none of this had a point to begin with, and as with all things that are pointless, that means I have the power to pick what the point should be. So, I said to hell with it and set the sync time to once every 30 minutes. A far cry from where I wanted to be, but for now this will have to do. If anyone here knows someone at Google with superpowers, that would be amazing. And a big thanks to Cloudinary for being a sponsor, and for helping make videos like this one possible.