Base64 na wideo

Wejście Base64

Podgląd wideo

Online odzyskiwanie zakodowanych w Base64 danych wideo na odtwarzalne pliki MP4/WebM/OGG. Obsługuje automatyczne rozpoznawanie prefiksu Data URL, wszystkie operacje są wykonywane lokalnie w przeglądarce bez wysyłania danych wideo na serwer. Idealne do debugowania interfejsów API backend, weryfikacji kodowania wideo i odzyskiwania wbudowanych filmów we frontendzie. Po dekodowaniu dostępny jest natychmiastowy podgląd i pobieranie.

Powiązane Rekomendacje

Video do Base64

Narzędzie paddingu Base64

Weryfikacja haszu pliku

Szyfrowanie i deszyfrowanie DES

JSON Compress

Narzędzie do formatowania SQL

Przypadki użycia

Debugowanie interfejsów wideo backend: gdy API zwraca zakodowane w Base64 dane wideo, po prostu wklej je do narzędzia, aby szybko podejrzeć i zweryfikować poprawność odpowiedzi interfejsu bez pisania kodu dekodowania po stronie frontendu
Weryfikacja wyjścia kodowania wideo: po wygenerowaniu wideo Base64 za pomocą FFmpeg lub chmurowych usług transkodowania, zdekoduj i odtwórz, aby sprawdzić poprawność wyniku i zidentyfikować problemy z uszkodzonym kodowaniem
Odzyskiwanie wbudowanych filmów na frontendzie: wyodrębniaj wbudowane wideo w formacie Data URL (data:video/mp4;base64,...) z HTML, CSS lub JavaScript i odzyskuj je do przeglądanych plików wideo
Szybka weryfikacja danych wideo: porównuj, czy dwa filmy Base64 dają tę samą zawartość po dekodowaniu, lub sprawdzaj, czy podczas transmisji Base64 wystąpiły uszkodzenia danych
Tymczasowy podgląd krótkich filmów: dla krótkich fragmentów wideo, które nie muszą być zapisywane lokalnie, oglądaj odtwarzanie bezpośrednio w narzędziu i zdecyduj, czy pobrać plik po potwierdzeniu zawartości
Parsowanie danych ze skrobaczek stron: szybko odzyskuj zakodowane w Base64 dane wideo uzyskane przez skrobaczki internetowe do odtwarzalnych plików do moderacji lub analizy zawartości
Debugowanie programowania klienta: podczas tworzenia aplikacji mobilnych i mini-aplikacji, gdy backend zwraca wideo Base64, użyj tego narzędzia do weryfikacji poprawności danych przed opracowaniem dekodowania po stronie klienta
Wykorzystanie w nauczaniu i demonstracjach: jako narzędzie demonstracyjne online podczas wyjaśniania zasad kodowania Base64, technologii Data URL, użycia Blob/URL.createObjectURL we frontendzie
Podgląd załączników pocztowych: niektóre systemy pocztowe konwertują załączniki na Base64 do osadzania — po ekstrakcji można szybko odzyskać i wyświetlić zawartość wideo
Pomoc w odtwarzaniu błędów: gdy zespół testowy zgłasza błędy związane z wideo, dostarczaj dane Base64, aby programiści mogli szybko odzyskać wideo i odtworzyć problematyczną sytuację

Jak Używać

Uzyskaj dane wideo Base64: skopiuj zakodowaną w Base64 ciąg wideo z odpowiedzi API, logów, kodu źródłowego HTML, bazy danych itp., obsługiwane z prefiksem Data URL lub bez niego
Wklej do obszaru wejściowego: wklej cały skopiowany tekst Base64 do pola wejściowego narzędzia, narzędzie automatycznie wykryje obecność prefiksu data:video/...;base64,
Potwierdź lub wybierz format: jeśli wejście zawiera prefiks Data URL, narzędzie automatycznie rozpozna typ MIME; jeśli jest to czysta Base64, ręcznie wybierz odpowiedni format wideo (MP4/WebM/OGG)
Kliknij przycisk dekodowania: po kliknięciu przycisku dekodowania narzędzie lokalnie w przeglądarce wykonuje operacje dekodowania Base64, konwersji Uint8Array, tworzenia Blob itp., podczas procesu wyświetlana jest wskazówka o statusie
Wyświetl informacje o wideo: po zakończeniu dekodowania wyświetl podstawowe informacje o wideo, w tym rozmiar pliku, typ MIME, potwierdzenie formatu, aby zweryfikować pomyślne dekodowanie
Odtwórz wideo: użyj wbudowanego w stronę odtwarzacza HTML5 do podglądu wideo, przeciągnij suwak postępu, aby sprawdzić pełność zawartości wideo, poprawność obrazu i dźwięku
Pobierz plik wideo: po potwierdzeniu poprawności wideo kliknij przycisk pobierania, aby zapisać wideo Blob lokalnie, plik automatycznie otrzyma poprawne rozszerzenie (.mp4/.webm/.ogg)

Funkcje

Inteligentne rozpoznawanie formatu wejściowego: automatycznie wykrywa czyste kodowanie Base64 i pełny format Data URL (prefiks data:video/...;base64,), dekoduje bez potrzeby ręcznego usuwania prefiksu
Obsługa wielu formatów wideo: pełna obsługa typów MIME wideo natywnie obsługiwanych przez nowoczesne przeglądarki — MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)
Przetwarzanie lokalne w przeglądarce: wszystkie operacje dekodowania Base64, tworzenia Blob i podglądu wideo są wykonywane w całości w przeglądarce użytkownika przez JavaScript, dane wideo nie są wysyłane na żadne serwery
Natychmiastowe odtwarzanie: po dekodowaniu automatycznie tworzony jest odtwarzacz wideo HTML5 z pełnymi kontrolkami — odtwarzanie, pauza, przewijanie, regulacja głośności, tryb pełnoekranowy
Pobieranie oryginalnego pliku: zapisz zdekodowane wideo jako plik lokalny jednym kliknięciem, poprawne rozszerzenie pliku (.mp4/.webm/.ogg) jest wybierane automatycznie na podstawie typu MIME
Automatyczne wykrywanie typu MIME: automatycznie rozpoznaje format wideo z prefiksu Data URL bez konieczności ręcznego wyboru; przy czystym wejściu Base64 obsługiwane jest ręczne określenie formatu
Wskaźnik postępu dekodowania w czasie rzeczywistym: podczas dekodowania dużych danych Base64 wyświetlany jest status przetwarzania, aby użytkownik nie myślał, że strona się zawiesiła
Wyświetlanie metadanych wideo: po dekodowaniu pokazywane są podstawowe informacje — rozmiar wideo, typ MIME, długość (przy odtwarzaniu), rozdzielczość
Wskazówki diagnostyczne błędów: przy nieprawidłowym formacie wejściowym, uszkodzonym kodowaniu Base64 lub nieobsługiwanym formacie wideo wyświetlane są jasne komunikaty o błędach i zalecenia dotyczące rozwiązywania problemów
Obsługa przeciągania i wklejania: obsługuje bezpośrednie wklejanie tekstu Base64 i przeciąganie plików tekstowych do obszaru wejściowego w celu zwiększenia wydajności debugowania
Automatyczne naprawianie problemów z kodowaniem: automatycznie obsługuje typowe problemy formatu — brak znaków dopełniających Base64 (=), znaki białe, znaki nowej linii
Kompatybilność między przeglądarkami: obsługuje wszystkie nowoczesne przeglądarki Chrome, Firefox, Safari, Edge, używa standardowych API atob i Uint8Array
Responsywny design: obsługuje użycie na komputerach i urządzeniach mobilnych, poprawnie dekoduje i wyświetla krótkie filmy na telefonach i tabletach
Gwarancja prywatności: dane wideo są w całości przetwarzane w pamięci lokalnej, po zamknięciu strony dane są natychmiast usuwane, nie pozostawiając pamięci podręcznej ani zapisów

Często Zadawane Pytania

Jakie formaty wideo obsługuje narzędzie Base64 na wideo?

Obsługiwane są główne natywnie odtwarzalne w przeglądarce formaty wideo: MP4 (video/mp4, kodowanie H.264+AAC), WebM (video/webm, kodowanie VP8/VP9+Vorbis/Opus), OGG (video/ogg, kodowanie Theora+Vorbis). Wśród nich format MP4 ma najlepszą kompatybilność, obsługiwany przez wszystkie nowoczesne przeglądarki i urządzenia mobilne, zalecany do użycia w pierwszej kolejności. Jeśli Twoje wideo jest w innych formatach (na przykład MOV, AVI, MKV), najpierw przekoduj je na MP4(H.264+AAC) za pomocą FFmpeg, a następnie wykonaj kodowanie Base64.

Czy trzeba dodawać prefiks data:video/mp4;base64 przy wejściu?

Nie. Narzędzie obsługuje dwa formaty wejściowe: ①czysty ciąg Base64 (bez żadnych prefiksów); ②pełny Data URL (z prefiksem data:video/xxx;base64,). Narzędzie automatycznie określa obecność prefiksu w wejściu, a jeśli istnieje, automatycznie wyodrębnia zawartość Base64 i rozpoznaje typ MIME. Zaleca się bezpośrednie kopiowanie pełnej zawartości zwracanej przez API, bez ręcznej obsługi prefiksu.

Czy można odtworzyć zdekodowane wideo bezpośrednio w przeglądarce?

Tak. Po zakończeniu dekodowania narzędzie utworzy wbudowany odtwarzacz wideo HTML5 z pełnymi funkcjami — odtwarzanie/pauza, przewijanie suwaka postępu, regulacja głośności, pełnoekranowe odtwarzanie. Możesz bezpośrednio podejrzeć zawartość wideo na stronie i zdecydować, czy pobrać plik lokalnie po potwierdzeniu poprawnego obrazu i dźwięku.

Czy obsługiwane jest przetwarzanie dużych wideo Base64? Czy istnieje ograniczenie rozmiaru?

Samo narzędzie nie ma surowych ograniczeń rozmiaru, ale przeglądarki mają ograniczenia pamięci i wydajności. Kodowanie Base64 zwiększa objętość wideo o około 33%, podczas procesu dekodowania przeglądarce wymagane jest przydzielenie pamięci do przechowywania kilku kopii — ciągu Base64, ciągu binarnego, Uint8Array, Blob itp., szczytowe zużycie pamięci może 3-5 razy przekraczać rozmiar oryginalnego wideo. Zaleca się przetwarzanie Base64 o rozmiarze do 5 MB (odpowiada około 3,7 MB oryginalnego wideo) dla płynnej pracy, Base64 o rozmiarze powyżej 10 MB może powodować zacięcia strony. Duże wideo nie są zalecane do przesyłania przez Base64, używaj tradycyjnych sposobów ładowania plików i ładowania po adresie URL.

Czy dane wideo są wysyłane na serwer? Czy prywatność jest bezpieczna?

Wszystkie operacje dekodowania są w całości wykonywane lokalnie w Twojej przeglądarce przez JavaScript, dane wideo nie są wysyłane na żadne serwery i nie wysyłają żadnych żądań sieciowych. Po zamknięciu strony dane wideo są natychmiast usuwane z pamięci przeglądarki, nie pozostawiając pamięci podręcznej ani zapisów. Możesz odłączyć sieć i używać tego narzędzia, funkcja dekodowania będzie działać poprawnie.

Dlaczego wideo po kodowaniu Base64 jest o 1/3 większe niż oryginalny plik?

Jest to determinowane zasadą kodowania Base64, nie jest to problem narzędzia. Base64 przekodowuje każde 3 bajty (24 bity) danych binarnych na 4 znaki ASCII (każdy znak zajmuje 1 bajt), dlatego po kodowaniu objętość wynosi 4/3≈133% oryginału, czyli objętość zwiększa się o około 33%. Jeśli długość danych źródłowych nie jest wielokrotnością 3, na końcu wypełniana jest znakami =, faktyczne zwiększenie objętości wynosi około 33%-37%. To zwiększenie objętości jest wspólną cechą wszystkich kodowań Base64, nie jest to problemem tego narzędzia.

Dlaczego moje MP4 Base64 nie jest odtwarzane po dekodowaniu?

MP4 to tylko format kontenera, kodek wideo w środku musi być formatem obsługiwanym przez przeglądarkę, aby można go było odtworzyć. W 99% przypadków kodek wideo to nie H.264 lub kodek audio to nie AAC. Na przykład w MP4 są hermetyzowane kodeki H.265(HEVC), AV1 itp., przeglądarka może nie odtworzyć. Możesz użyć polecenia FFmpeg ffmpeg -i input.mp4 do wyświetlenia informacji o kodowaniu, jeśli to nie H.264+AAC, użyj polecenia ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 do transkodowania, a następnie zakoduj w Base64. Upewnij się również, że typ MIME jest ustawiony jako video/mp4, a dane Base64 są kompletne i nieobcięte.

Jak sprawdzić, czy mój kodek wideo jest kompatybilny z przeglądarkami?

Zaleca się użycie narzędzia FFmpeg do sprawdzenia: po instalacji FFmpeg wykonaj ffmpeg -i yourvideo.mp4, zobacz linie Video i Audio w wyjściu. Linia Video powinna zawierać h264 (lub avc), linia Audio — aac. Na przykład: Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...). Jeśli to nie te dwa kodeki, wymagane jest transkodowanie. Możesz również bezpośrednio przeciągnąć oryginalny plik wideo do okna przeglądarki Chrome — jeśli jest odtwarzany bezpośrednio, oznacza to, że kodowanie jest kompatybilne z przeglądarkami.

Jakie rozszerzenie ma plik wideo pobierany po dekodowaniu?

Narzędzie automatycznie dobiera poprawne rozszerzenie pliku na podstawie wybranego (lub automatycznie rozpoznanego) typu MIME: video/mp4 odpowiada .mp4, video/webm odpowiada .webm, video/ogg odpowiada .ogv. Nie musisz ręcznie zmieniać rozszerzenia, pobrany plik można bezpośrednio otworzyć domyślnym odtwarzaczem systemowym.

Czy znaki nowej linii i spacje w ciągu Base64 wpływają na dekodowanie?

Nie wpływają. Narzędzie automatycznie obsługuje znaki białe w ciągu Base64 — znaki nowej linii (\n), powrotu karetki (\r), spacje, tabulacje itp., te znaki są usuwane przed dekodowaniem. Dlatego nawet jeśli Twój Base64 jest w formacie wielowierszowym (na przykład format MIME z przeniesieniem linii co 76 znaków) lub podczas kopiowania dostały się spacje formatowania, dekodowanie będzie poprawne.

Jak zaimplementować konwersję Base64 na wideo na frontendzie za pomocą JavaScript?

Podstawowa logika kodu jest następująca: ①usuń prefiks Data URL w celu uzyskania czystej Base64; ②zdekoduj na ciąg binarny za pomocą atob(base64Str); ③przekonwertuj ciąg binarny na Uint8Array (przeiteruj po każdym znaku i uzyskaj charCode); ④utwórz Blob za pomocą new Blob([uint8Array], {type: 'video/mp4'}); ⑤wygeneruj tymczasowy adres URL za pomocą URL.createObjectURL(blob); ⑥ustaw adres URL w video.src. Należy pamiętać, że po użyciu wywołaj URL.revokeObjectURL(url) w celu zwolnienia pamięci, aby uniknąć wycieków pamięci.

Jaka jest różnica między wideo Data URL a wideo Blob URL?

Data URL zapisuje pełne dane Base64 bezpośrednio w adresie URL, format data:video/mp4;base64,XXXX, sam adres URL zawiera wszystkie dane; Blob URL to tymczasowe odwołanie w formacie blob://, wygenerowane przez URL.createObjectURL(), wskazuje na obiekt Blob w pamięci przeglądarki, sam adres URL jest krótki i nie zawiera danych. Data URL przy każdym użyciu wymaga parsowania całego ciągu Base64, wydajność jest gorsza; Blob URL jest bardziej wydajny, nadaje się do odtwarzania i ponownego wykorzystania. To narzędzie wewnętrznie używa sposobu Blob URL do implementacji odtwarzacza.

W jakich scenariuszach nadaje się kodowanie wideo w Base64? W jakich nie nadaje się?

Odpowiednie scenariusze: ①krótkie filmy o rozmiarze do kilku MB (animacje ładowania, podpowiedzi, animacje ikon); ②wideo, które trzeba osadzić w Demo/dokumentach z jednym plikiem HTML; ③wbudowane małe filmy w wiadomościach e-mail; ④tymczasowe przesyłanie małych filmów podczas debugowania interfejsów API. Nieodpowiednie scenariusze: ①wideo o rozmiarze powyżej 5 MB (zwiększenie objętości o 33% zbytnio marnuje przepustowość); ②wideo przesyłane przez użytkowników (rozmiar niekontrolowany); ③długie wideo wymagające ładowania strumieniowego lub przewijania; ④wideo, które powinny być buforowane i ponownie wykorzystywane przez przeglądarkę (Data URL nie może być oddzielnie buforowany); ⑤treści wideo dla użytkowników w środowisku produkcyjnym (należy używać CDN i adresów URL zewnętrznych plików).

Dlaczego wideo po dekodowaniu normalnie odtwarza się w Safari, a w Chrome — nie?

Taka sytuacja występuje stosunkowo rzadko, zazwyczaj jest to związane z tym, że kodek wideo — H.265(HEVC) — Safari na macOS i iOS dobrze obsługuje H.265 (z akceleracją sprzętową), ale Chrome i Firefox mają ograniczoną obsługę H.265 (wymagają sprzętu i licencji). Rozwiązanie — transkodowanie na kodek H.264, to uniwersalny kodek obsługiwany przez wszystkie przeglądarki. Odwrotna sytuacja, gdy Chrome odtwarza, a Safari nie — jest bardziej powszechna, zazwyczaj jest to związane ze zbyt wysokim Profile/Level kodowania lub moov atom na końcu pliku.

Czy jakość obrazu jest tracona podczas wzajemnej konwersji wideo Base64 i plików wideo?

Jakość obrazu nie jest tracona. Base64 to sposób kodowania, a nie kompresja lub transkodowanie, po prostu wykonuje konwersję z jednoznacznym dopasowaniem między danymi binarnymi a ciągami tekstowymi. Wideo po konwersji na Base64 i ponownym dekodowaniu daje dane binarne całkowicie zgodne z oryginalnym plikiem wideo (bajt po bajcie identyczne), bez żadnej utraty jakości obrazu lub dźwięku — jest to podobne do kopiowania i wklejania pliku, a nie kompresji i konwersji. Przy prawidłowym procesie kodowania i dekodowania Base64 jakość wideo całkowicie zgadza się z oryginalnym plikiem.

Rozwiązywanie problemów

Po dekodowaniu Base64 wideo nie jest odtwarzane, HTML5 video pokazuje nieobsługiwany format lub czarny ekran

Nieprawidłowo ustawiony typ MIME: dla wideo MP4 ustawiono video/webm lub inny nieodpowiadający typ Kodek wideo nie jest obsługiwany przez przeglądarkę: na przykład w MP4 znajduje się kodowanie H.265, a nie H.264 Dane Base64 zostały obcięte podczas procesu kopiowania, brakuje części na początku lub na końcu, co spowodowało uszkodzenie pliku Nieprawidłowa obsługa prefiksu Data URL: prefiks jest również dekodowany jako Base64 lub podczas usuwania prefiksu zostały błędnie usunięte początkowe znaki Base64 Oryginalne wideo samo w sobie jest uszkodzone lub ma specjalny format nieobsługiwany przez przeglądarkę Rozdzielczość wideo przekracza ograniczenia przeglądarki lub jest używany nieobsługiwany przez przeglądarkę format pikseli (na przykład 10-bitowy YUV) Uszkodzony nagłówek pliku wideo (ftyp atom), przeglądarka nie może rozpoznać formatu kontenera MP4

Funkcja atob() zgłasza InvalidCharacterError, dekodowanie kończy się niepowodzeniem

W ciągu Base64 znajdują się niedozwolone znaki: standardowy zestaw znaków Base64 zawiera tylko 65 znaków A-Z, a-z, 0-9, +, /, = Prefiks Data URL data:video/mp4;base64, nie został usunięty i przekazany bezpośrednio do atob() W ciągu znalazły się znaki nowej linii \n, powrotu karetki \r, spacje, tabulacje i inne znaki białe Podczas kopiowania z Word/stron internetowych pojawiły się chińskie znaki interpunkcyjne, znaki o pełnej szerokości lub niewidoczne znaki specjalne Ciąg Base64 został zakodowany URL (znak plusa + stał się %2B, ukośnik / stał się %2F), wymagane jest wstępne dekodowanie URL Długość ciągu Base64 nie jest wielokrotnością 4, a brak znaku dopełniającego = powoduje nieudaną weryfikację atob Niektóre języki backendowe (na przykład Java, Python) używają wariantu kodera Base64 bezpiecznego dla URL (- i _ zamiast + i /)

Wideo normalnie odtwarza się w Chrome/Firefox, ale nie odtwarza się w Safari

Safari ma bardziej rygorystyczne wymagania dotyczące Profile i Level kodowania H.264, rozszerzone konfiguracje, takie jak High Profile Level 5.1, mogą nie być obsługiwane moov atom (metadane) pliku MP4 znajduje się na końcu pliku, a nie na początku, Safari oczekuje pełnego załadowania przed odtworzeniem Kodek audio to nie AAC, Safari słabo obsługuje inne audio, takie jak MP3, w kontenerze MP4 Rozdzielczość lub bitrate wideo są zbyt wysokie, przekraczają możliwości sprzętowego dekodowania Safari (szczególnie iOS Safari) Używane są nieobsługiwane przez Safari funkcje kodowania, takie jak 10-bitowa głębia koloru, niektóre funkcje H.264 iOS Safari wymaga ustawienia atrybutu playsinline dla wideo, aby było odtwarzane wbudowane, w przeciwnym razie będzie pełnoekranowe lub nie odtworzy się Safari ma wymagania dotyczące częstotliwości próbkowania ścieżki audio, niestandardowe częstotliwości (na przykład nie 44,1 kHz/48 kHz) mogą spowodować niepowodzenie odtwarzania

Podczas dekodowania dużych wideo Base64 strona zacina się, przeglądarka zawiesza się

JavaScript jest jednowątkowy, atob() i konwersja Uint8Array są wykonywane w głównym wątku, blokując renderowanie UI Podczas procesu dekodowania Base64 tworzonych jest kilka dużych ciągów i tablic, wysokie zużycie pamięci (przy dekodowaniu Base64 o rozmiarze 10 MB szczytowe zużycie pamięci może osiągnąć kilkadziesiąt MB) Tworzenie Blob i Object URL również wymaga pamięci, duże filmy łatwo wywołują ograniczenia pamięci przeglądarki Na urządzeniach mobilnych pamięci jest mniej, są one bardziej podatne na awarie z powodu OOM (braku pamięci) Nie jest używany Web Worker, wszystkie operacje w głównym wątku blokują pętlę zdarzeń Przeglądarki mają ograniczenia długości jednego ciągu (silnik V8 — około od 512 MB do 1 GB), bardzo długie ciągi Base64 mogą być niepoprawnie parsowane Częste odśmiecanie pamięci (GC) podczas procesu dekodowania również powoduje zacięcia strony i opóźnienia reakcji

Skopiowane z odpowiedzi API Base64 po dekodowaniu daje uszkodzone wideo, nieodtwarzalne

Backend podczas zwracania Base64 automatycznie wyekranizował znaki specjalne (na przykład + przekształcił się w spację lub problemy z ekranizowaniem JSON) Podczas parsowania JSON niepoprawnie obsłużono znaki specjalne w ciągu Base64 Podczas kodowania Base64 na backendzie wystąpił błąd kodowania, na przykład dane binarne zostały potraktowane jako ciąg UTF-8 Dane zostały zmienione podczas procesu kompresji gzip lub transmisji HTTP Podczas kopiowania z Chrome DevTools podgląd Response w panelu Network może obcinać lub ekranizować długie ciągi Backend używa innego wariantu Base64 (na przykład Base64 bezpieczny dla URL z - i _ zamiast + i /), a frontend nie obsłużył tego Odpowiedź API jest podzielona na strony lub obcięta, dane Base64 są niekompletne

W wideo jest tylko obraz bez dźwięku lub dźwięk i obraz nie są zsynchronizowane

Kodek audio nie jest obsługiwany przez przeglądarkę: na przykład w MP4 użyto MP3 lub Opus zamiast AAC Podczas transkodowania wideo parametry audio zostały ustawione niepoprawnie, co spowodowało błędy znaczników czasu (PTS/DTS) Dane Base64 są niekompletne, okazała się obcięta część danych ścieżki audio Wideo ze zmienną liczbą klatek na sekundę (VFR), niektóre przeglądarki słabo obsługują wideo VFR, co prowadzi do desynchronizacji audio i wideo Oryginalne wideo samo w sobie ma problem z synchronizacją audio i wideo, nie jest to spowodowane dekodowaniem Base64 Częstotliwość próbkowania audio lub liczba kanałów nie są obsługiwane przez przeglądarkę, co prowadzi do niepowodzenia dekodowania ścieżki audio Baza czasu (timebase) ścieżki audio i ścieżki wideo w kontenerze wideo nie zgadza się, co prowadzi do przesunięcia synchronizacji podczas odtwarzania

Słownik

Base64: Sposób kodowania danych binarnych na podstawie 64 drukowalnych znaków, każde 3 bajty danych binarnych są kodowane na 4 bajty tekstu ASCII, objętość zwiększa się o około 33%, często używany do przesyłania danych binarnych w protokołach tekstowych.
Data URL: Schemat URI zdefiniowany w RFC 2397, format data:[mediatype][;base64],data, umożliwia osadzanie małych plików bezpośrednio w dokumentach bez dodatkowych żądań HTTP.
Typ MIME: Identyfikator typu mediów, używany do określania formatu dokumentu lub pliku. Formaty wideo zaczynają się od video/, na przykład video/mp4, video/webm, video/ogg, przeglądarki na podstawie typu MIME określają sposób przetwarzania zasobu.
Blob: Binary Large Object (duży obiekt binarny), obiekt w przeglądarce reprezentujący niezmienne oryginalne dane binarne, może być używany do przechowywania danych plików, takich jak wideo, obrazy, generuje dostępny adres URL przez URL.createObjectURL().
atob(): Wbudowana w przeglądarkę funkcja do dekodowania ciągu w kodowaniu Base64 na ciąg binarny (ASCII to Binary), odpowiadająca jej funkcja kodowania to btoa() (Binary to ASCII).
btoa(): Wbudowana w przeglądarkę funkcja do kodowania ciągu binarnego na ciąg Base64 (Binary to ASCII), operacja odwrotna do atob(), używana podczas konwersji wideo na Base64.
Uint8Array: Typizowana tablica JavaScript, przechowująca 8-bitowe liczby całkowite bez znaku (0-255), każdy element odpowiada jednemu bajtowi — standardowy sposób przetwarzania danych binarnych, po dekodowaniu Base64 wymagana jest konwersja na Uint8Array przed utworzeniem Blob.
MP4: MPEG-4 Part 14, powszechny format kontenera multimedialnego, zazwyczaj hermetyzuje kodek wideo H.264 i kodek audio AAC, najlepsza kompatybilność z siecią, rozszerzenie pliku .mp4.
WebM: Wprowadzony przez Google otwarty, bezpłatny format kontenera wideo, zazwyczaj używa kodeków wideo VP8/VP9/AV1 i kodeków audio Vorbis/Opus, współczynnik kompresji lepszy niż w MP4, dobrze obsługiwany przez Chrome/Firefox/Edge.
OGG: Opracowany przez fundację Xiph otwarty format kontenera multimedialnego, wideo zazwyczaj kodowane jest Theora, audio — Vorbis, obecnie stopniowo wypierany przez WebM, rozszerzenie pliku .ogv.
H.264/AVC: Najszerzej stosowany obecnie standard kodowania wideo, nazywany również AVC (Advanced Video Coding), z dobrym balansem współczynnika kompresji i jakości, obsługiwany przez akcelerację sprzętową, standardowy kodek wideo dla kontenera MP4, kompatybilny ze wszystkimi przeglądarkami.
AAC: Advanced Audio Coding, zaawansowane kodowanie audio, standardowy kodek audio dla kontenera MP4, następca formatu MP3, przy tej samej jakości plik jest mniejszy, obsługiwany przez wszystkie nowoczesne przeglądarki.
Object URL: Tymczasowy adres URL utworzony przez URL.createObjectURL(blob), format blob://..., może być bezpośrednio używany w atrybucie src tagów video/img itp., wskazuje na dane Blob w pamięci, po użyciu wymaga wywołania revokeObjectURL w celu zwolnienia.
FFmpeg: Narzędzie do przetwarzania audio i wideo o otwartym kodzie źródłowym, może być używane do transkodowania wideo, montażu, wyświetlania informacji o kodowaniu, kompresji itp., jest branżowym standardowym narzędziem do przetwarzania wideo, niezbędnym do weryfikacji i konwersji kodeków wideo.
moov atom: Atom metadanych w pliku MP4, zawierający kluczowe dane, takie jak długość wideo, rozdzielczość, informacje o kodowaniu, parametry dekodowania. moov musi być na początku pliku dla szybkiego odtwarzania, dla wideo internetowego zalecane jest umieszczenie na początku (faststart).
Format kontenera: Format pliku hermetyzujący strumień wideo, strumień audio, napisy, metadane, na przykład MP4, WebM, OGG, MKV. Format kontenera nie jest równy formatowi kodeka, ten sam kontener może hermetyzować różne kodeki.
Kodek wideo: Algorytm kompresji i dekompresji danych wideo, powszechne — H.264, H.265(HEVC), VP8, VP9, AV1. Kodek określa współczynnik kompresji i jakość obrazu, obsługiwane przez przeglądarkę kodeki określają możliwość odtwarzania wideo.
Debugowanie API: Proces weryfikacji poprawności danych podczas tworzenia interfejsów frontend i backend. To narzędzie może być używane do szybkiego podglądu poprawności zwracanych przez API danych wideo Base64 bez pisania kodu dekodowania po stronie frontendu.
Chrome DevTools: Wbudowane w przeglądarkę Chrome narzędzia programistyczne, panel Network umożliwia przeglądanie żądań i odpowiedzi API, z niego można kopiować dane wideo Base64 do debugowania.
Znak dopełniający =: Na końcu kodowania Base64 mogą pojawić się 1 lub 2 znaki równości w celu dopełnienia długości wyniku kodowania do wielokrotności 4. Brak dopełnienia przy dekodowaniu może spowodować błąd, narzędzie może automatycznie naprawiać problemy z dopełnianiem.

Tabela zgodności typów MIME wideo internetowego i kompatybilności

Typ MIME	Format kontenera	Często używane kodeki wideo	Często używane kodeki audio	Kompatybilność z przeglądarkami	Rozszerzenia plików
video/mp4	MP4 (MPEG-4 Part 14)	H.264/AVC, H.265/HEVC, AV1	AAC, MP3	Wszystkie nowoczesne przeglądarki (Chrome/Firefox/Safari/Edge/iOS/Android), kombinacja H.264+AAC jest w 100% kompatybilna	.mp4, .m4v
video/webm	WebM	VP8, VP9, AV1	Vorbis, Opus	Chrome/Firefox/Edge/Opera w pełni obsługują, Safari 14.1+ obsługuje, iOS Safari 15+ częściowo obsługuje	.webm
video/ogg	Ogg	Theora	Vorbis	Obsługiwane przez Firefox/stare wersje Chrome/Opera, Safari nie obsługuje, obecnie używane rzadko	.ogv, .ogg
video/quicktime	QuickTime (MOV)	ProRes, H.264	AAC, PCM	Głównie obsługiwane przez Safari/macOS, kompatybilność z innymi przeglądarkami jest słaba	.mov
video/x-matroska	Matroska	H.264, VP9, AV1, itp.	Różne kodeki	Natywna obsługa w przeglądarkach jest słaba, zazwyczaj wymagany jest odtwarzacz zewnętrzny, nie zalecane do użytku w internecie	.mkv

Typowe kody błędów dekodowania wideo Base64 i rozwiązania

Błąd/komunikat o błędzie	Możliwe przyczyny	Kierunek rozwiązywania	Rozwiązanie
atob() zgłasza błąd: InvalidCharacterError lub "not correctly encoded"	Ciąg Base64 zawiera niedozwolone znaki; prefiks Data URL nie został usunięty; są znaki białe/znaki nowej linii	Sprawdź, czy ciąg wejściowy zawiera tylko A-Za-z0-9+/=; upewnij się, że prefiks data: został usunięty	Usuń prefiks data:video/...;base64,; usuń wszystkie znaki nowej linii, spacje, tabulacje; sprawdź obecność zmieszanych znaków chińskich lub specjalnych
Dekodowanie powiodło się, ale wideo nie jest odtwarzane, wyświetla się «nieobsługiwany format wideo»	Nieprawidłowy typ MIME; kodek wideo nie jest obsługiwany przez przeglądarkę; nagłówek pliku uszkodzony	Upewnij się, że typ MIME odpowiada faktycznemu formatowi wideo; sprawdź informacje o kodowaniu za pomocą FFmpeg	Wybierz poprawny typ MIME (MP4 używaj video/mp4); przekoduj za pomocą FFmpeg na H.264+AAC (MP4); sprawdź kompletność początku i końca Base64
W wideo jest obraz bez dźwięku lub dźwięk bez obrazu	Jeden z kodeków audio lub wideo nie jest obsługiwany przez przeglądarkę; ścieżka audio lub ścieżka wideo jest uszkodzona	Zobacz za pomocą FFmpeg, jakie strumienie zawiera wideo i ich kodeki	MP4 musi być wideo H.264+audio AAC; WebM używaj VP8/VP9+Vorbis/Opus; przekoduj ponownie na standardowy kompatybilny format
Obraz wideo jest zniekształcony, zielony ekran, mozaika	Dane Base64 są niekompletne (obcięte); dane uszkodzone podczas procesu dekodowania; utrata klatek kluczowych	Porównaj oryginalną długość Base64, sprawdź kompletność kopiowania	Skopiuj ponownie cały ciąg Base64; sprawdź utratę znaków podczas procesu transmisji; upewnij się, że sam oryginalny plik wideo jest sprawny
Rozmiar zdekodowanego wideo nie zgadza się z oryginalnym plikiem	Nieprawidłowa obsługa znaków dopełniających Base64=; problemy z kodowaniem podczas konwersji ciągu binarnego na Uint8Array	Sprawdź poprawność obsługi dopełnienia w logice dekodowania; upewnij się, że zakres charCodeAt — 0-255	Zapewnij poprawną obsługę znaków = na końcu Base64; sprawdź poprawność logiki konwersji Uint8Array
Podczas dekodowania dużych filmów strona zacina się i nie odpowiada	Dekodowanie Base64 jest wykonywane w głównym wątku, blokując UI; wideo jest zbyt duże, przekracza ograniczenie pamięci	Sprawdź rozmiar danych Base64, Base64 o rozmiarze powyżej 10 MB (około 7,5 MB oryginalnego wideo) może powodować zacięcia	Duże wideo nie są zalecane w Base64; rozważ możliwość dekodowania w tle za pomocą Web Worker; przetwarzaj po fragmentach; przejdź na sposób ładowania plików
W Safari dekodowanie przechodzi, ale odtwarzanie nie działa, w Chrome wszystko jest w porządku	Safari ma bardziej rygorystyczne wymagania dotyczące kodeków wideo; moov atom nie jest na początku pliku; zbyt wysoki Profile/Level kodowania	Sprawdź za pomocą FFmpeg H.264 Profile i Level; sprawdź położenie moov	Podczas transkodowania dodaj -movflags +faststart; używaj H.264 Baseline/Main Profile, Level nie wyższy niż 4.1; upewnij się, że audio to AAC
Data URL bezpośrednio ustawiony w video src nie jest odtwarzany	Nieprawidłowy format Data URL; nieprawidłowo określony typ MIME; część Base64 uszkodzona	Sprawdź format Data URL: data:video/xxx;base64,xxxx	Upewnij się co do poprawności typu MIME; przecinek to przecinek angielski; część Base64 jest kompletna; niektóre urządzenia mobilne mają ograniczenia rozmiaru Data URL

Tabela porównania rozmiaru oryginalnego wideo i rozmiaru po kodowaniu Base64

Rozmiar oryginalnego wideo	Rozmiar po kodowaniu Base64 (około)	Przyrost objętości	Narzędzia nagłówka Data URL	Czy nadaje się do osadzania	Typowe scenariusze
100 KB	~133 KB	+33%	około 20 bajtów	Zalecane	Bardzo małe animacje ikon, bezgłośne animacje ładowania trwające kilka sekund
500 KB	~667 KB	+33%	około 20 bajtów	Zalecane	Krótkie zapętlone animacje, krótkie filmy podpowiedzi, animacje reakcji przycisków
1 MB	~1,33 MB	+33%	około 20 bajtów	Zależnie od sytuacji	Filmy instruktażowe trwające 5-10 sekund, animacje demonstracyjne niskiej rozdzielczości, zwróć uwagę na wydajność pierwszego ekranu
2 MB	~2,67 MB	+33%	około 20 bajtów	Nie zalecane	Blisko górnej granicy rozmiaru wbudowanego wideo, znacznie zwiększa czas ładowania strony
5 MB	~6,67 MB	+33%	około 20 bajtów	Nie zalecane	Zbyt duży rozmiar, nie zaleca się osadzania przez Base64, używaj zewnętrznych plików wideo
10 MB	~13,3 MB	+33%	około 20 bajtów	Zabronione	Poważnie wpływa na ładowanie strony, może spowodować awarię z powodu braku pamięci na urządzeniach mobilnych
50 MB	~66,7 MB	+33%	około 20 bajtów	Zabronione	Kategorycznie nie przetwarzaj tak dużych filmów przez Base64, konieczne jest użycie sposobu ładowania/pobierania plików