{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Player 360","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"player-360","__idx":0},"children":["Player 360"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 VirtualCar360 to interaktywny komponent frontendowy przeznaczony do prezentacji płynnego obrotu samochodu. Implementacja Playera 360 jest taka sama jak standardowego Playera, komponent osadzany jest na stronie jako ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," i może zostać załadowany po numerze VIN albo numerze rejestracyjnym pojazdu."]},{"$$mdtype":"Tag","name":"div","attributes":{"style":{"position":"relative","width":"100%","paddingBottom":"75%","height":"0","overflow":"hidden"}},"children":[{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://player360-staging.web.app/player/?carId=10187074&key=9c3b1830513cc3b8fc4b76635d32e692","width":"100%","height":"600","frameBorder":"0","allowFullScreen":""},"children":[]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Główna różnica polega na sposobie prezentacji zdjęć. Player 360 wykorzystuje większą liczbę klatek oraz szybsze tempo odtwarzania, dzięki czemu obrót samochodu jest znacznie płynniejszy niż w standardowej galerii zdjęć."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W zależności od konfiguracji Player 360 może wykorzystywać:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["180 zdjęć,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["360 zdjęć."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Zdjęcia pośrednie są generowane przez AI na podstawie 4 albo 8 oryginalnych ujęć samochodu. Oryginalne zdjęcia stanowią punkty referencyjne, a klatki pomiędzy nimi są tworzone automatycznie poprzez autorskie rozwiązanie AI, aby uzyskać płynny efekt obrotu pojazdu."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Wskazówka"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementacja Playera 360 jest identyczna jak zwykłego Playera. Wystarczy osadzić ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," z adresem Playera oraz przekazać ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}," i ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]},"."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"zastosowanie","__idx":1},"children":["Zastosowanie"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 jest przeznaczony do prezentacji pojazdu w formie płynnego, interaktywnego obrotu. Najczęściej wykorzystywany jest:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako główny element multimedialny na stronie pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako slider strony szczegółów pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako uzupełnienie standardowego Playera,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako element zwiększający atrakcyjność oferty,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako forma prezentacji samochodu zbliżona do oglądania pojazdu na żywo."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 pozwala użytkownikowi samodzielnie obracać samochód, zatrzymywać widok na wybranym kącie oraz powiększać zdjęcie w celu dokładniejszego obejrzenia detali."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"zasada-działania","__idx":2},"children":["Zasada działania"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 działa jako zewnętrzny widget osadzany przez ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Po załadowaniu Player:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["odczytuje parametry z adresu URL,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["identyfikuje pojazd po numerze VIN albo numerze rejestracyjnym,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["pobiera najnowszą galerię przypisaną do pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ładuje zestaw zdjęć przeznaczony do prezentacji 360,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["odtwarza płynną sekwencję obrotu pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["umożliwia użytkownikowi interakcję z widokiem, w tym przesuwanie, zatrzymywanie i powiększanie zdjęcia."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W zależności od konfiguracji galeria może składać się z 180 albo 360 klatek. Klatki pośrednie są generowane przez AI na podstawie 4 albo 8 oryginalnych ujęć pojazdu."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"różnice-względem-zwykłego-playera","__idx":3},"children":["Różnice względem zwykłego Playera"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Obszar"},"children":["Obszar"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Zwykły Player"},"children":["Zwykły Player"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Player 360"},"children":["Player 360"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sposób prezentacji"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Galeria zdjęć pojazdu"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Płynny obrót samochodu"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Liczba zdjęć"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Zależna od galerii i konfiguracji"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Najczęściej 180 albo 360 klatek"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Płynność"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Standardowa prezentacja zdjęć"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Szybkie odtwarzanie wielu klatek"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Zdjęcia AI"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Nie są wymagane"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Klatki pośrednie mogą być generowane przez AI"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Źródło zdjęć"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Zdjęcia wykonane podczas sesji"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4 albo 8 oryginalnych ujęć + klatki AI"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Zoom"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Powiększanie zdjęć galerii"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Powiększanie oryginalnego zdjęcia po przewinięciu do jego pozycji"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hotspoty"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mogą występować na zdjęciach"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Klatki wygenerowane przez AI nie posiadają hotspotów"]}]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"generowanie-klatek","__idx":4},"children":["Generowanie klatek"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 może wykorzystywać zestaw 180 albo 360 klatek. Nie wszystkie klatki muszą pochodzić bezpośrednio z sesji zdjęciowej."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Typowy proces wygląda następująco:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Podczas sesji wykonywane są 4 albo 8 oryginalnych zdjęć samochodu."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["System VirtualCar360 wykorzystuje te zdjęcia jako punkty referencyjne."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Klatki pomiędzy oryginalnymi ujęciami są generowane przez AI."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Player 360 odtwarza pełną sekwencję jako płynny obrót samochodu."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Dzięki temu możliwe jest uzyskanie efektu pełnego obrotu pojazdu bez konieczności wykonywania 180 albo 360 fizycznych zdjęć podczas sesji."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Informacja"},"children":[" Klatki wygenerowane przez AI służą do płynnej animacji obrotu pojazdu. Do powiększania i analizy detali wykorzystywane są oryginalne zdjęcia samochodu. "]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"powiększanie-zdjęcia","__idx":5},"children":["Powiększanie zdjęcia"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 umożliwia powiększanie zdjęcia na dwa sposoby:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["przez gest pinch zoom na urządzeniach dotykowych,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["przez kółko myszy na komputerach."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Podczas powiększania Player 360 nie powiększa klatki wygenerowanej przez AI. Zamiast tego samochód zostaje automatycznie przewinięty do pozycji najbliższego oryginalnego zdjęcia, a następnie powiększenie wykonywane jest na zdjęciu źródłowym."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Dzięki temu użytkownik otrzymuje płynną animację obrotu, ale podczas oglądania detali korzysta z jakości oryginalnego zdjęcia."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Przykład działania:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Użytkownik obraca samochód do dowolnej pozycji."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Aktualnie widoczna klatka może być klatką wygenerowaną przez AI."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Użytkownik wykonuje pinch zoom albo używa kółka myszy."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Player przewija widok do najbliższej pozycji oryginalnego zdjęcia."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Powiększenie wykonywane jest na oryginalnym zdjęciu."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Ważne"},"children":[" Klatki wygenerowane przez AI nie są przeznaczone do szczegółowego powiększania. Zoom wykonywany jest na oryginalnych zdjęciach źródłowych, aby zachować możliwie najwyższą jakość detali pojazdu. "]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"hotspoty-w-playerze-360","__idx":6},"children":["Hotspoty w Playerze 360"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Klatki wygenerowane przez AI nie posiadają hotspotów."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hotspoty mogą być dostępne tylko dla zdjęć wnętrza, które pochodzą z oryginalnych materiałów i zostały odpowiednio oznaczone w systemie VirtualCar360."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hotspot może wskazywać na przykład:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ekran LCD,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["szyberdach,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["element wyposażenia,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["zadrapanie tapicerki,"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"adres-playera-360","__idx":7},"children":["Adres Playera 360"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 jest osadzany przez ten sam mechanizm co zwykły Player."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adres bazowy:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"txt","header":{"controls":{"copy":{}}},"source":"https://virtualcar360.pl/player/\n","lang":"txt"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Do adresu należy przekazać identyfikator pojazdu oraz klucz API."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"parametry-url","__idx":8},"children":["Parametry URL"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parametr"},"children":["Parametr      "]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"right","data-label":"Wymagany"},"children":["Wymagany"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Opis"},"children":["Opis"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["warunkowo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Identyfikator samochodu. Pozwala bezpośrednio wskazać konkretny player."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["warunkowo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Numer VIN pojazdu. Wymagany, jeżeli nie przekazano ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["warunkowo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Numer rejestracyjny pojazdu. Wymagany, jeżeli nie przekazano ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["tak"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Klucz API przypisany do lokalizacji albo klucz grupowy dla wielu lokalizacji."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Uwaga"},"children":[" W jednym adresie Playera należy przekazać tylko jeden identyfikator pojazdu: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},". Nie ma potrzeby przekazywania kilku parametrów jednocześnie. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," pozwala wskazać konkretny Player, natomiast ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," i ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}," służą do automatycznego wyszukania najnowszego Playera dostępnego dla danego pojazdu. "]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"osadzenie-playera-360-po-numerze-vin","__idx":9},"children":["Osadzenie Playera 360 po numerze VIN"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"osadzenie-playera-360-po-numerze-rejestracyjnym","__idx":10},"children":["Osadzenie Playera 360 po numerze rejestracyjnym"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsywne-osadzenie","__idx":11},"children":["Responsywne osadzenie"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Zalecanym sposobem osadzania Playera 360 jest umieszczenie ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," w responsywnym kontenerze. Dzięki temu Player dopasowuje się do szerokości strony i działa poprawnie na desktopie, tablecie oraz urządzeniach mobilnych."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n \n
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vc360-player-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n}\n\n.vc360-player-wrapper iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Proporcja ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["56.25%"]}," odpowiada układowi ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16:9"]},". Jeżeli Player 360 ma być głównym elementem strony pojazdu, można zastosować większą wysokość."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vc360-player-wrapper {\n position: relative;\n width: 100%;\n height: 720px;\n overflow: hidden;\n}\n\n.vc360-player-wrapper iframe {\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"przykład-użycia-jako-główny-slider-pojazdu","__idx":12},"children":["Przykład użycia jako główny slider pojazdu"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n
\n \n
\n\n
\n

Volkswagen Passat Variant

\n

2.0 TDI · DSG · 2022

\n
\n
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vehicle-hero__player {\n width: 100%;\n height: 680px;\n}\n\n.vehicle-hero__player iframe {\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dynamiczne-generowanie-adresu-playera-360","__idx":13},"children":["Dynamiczne generowanie adresu Playera 360"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W typowej integracji system klienta posiada już numer VIN albo numer rejestracyjny pojazdu. Adres Playera 360 można wygenerować dynamicznie."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"function createVirtualCar360PlayerUrl({ vin, numberplates, apiKey }) {\n const url = new URL('https://virtualcar360.pl/player/');\n\n if (vin) {\n url.searchParams.set('vin', vin);\n } else if (numberplates) {\n url.searchParams.set('numberplates', numberplates);\n } else {\n throw new Error('VIN albo numer rejestracyjny jest wymagany.');\n }\n\n url.searchParams.set('key', apiKey);\n\n return url.toString();\n}\n\nconst playerUrl = createVirtualCar360PlayerUrl({\n vin: '1NKCLR0X1XR568641',\n apiKey: 'TWOJ_KLUCZ_API',\n});\n\ndocument.querySelector('#vc360-player').src = playerUrl;\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"przykład-integracji-w-react","__idx":14},"children":["Przykład integracji w React"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"type VirtualCar360PlayerProps = {\n vin?: string;\n numberplates?: string;\n apiKey: string;\n};\n\nexport function VirtualCar360Player({\n vin,\n numberplates,\n apiKey,\n}: VirtualCar360PlayerProps) {\n const url = new URL('https://virtualcar360.pl/player/');\n\n if (vin) {\n url.searchParams.set('vin', vin);\n } else if (numberplates) {\n url.searchParams.set('numberplates', numberplates);\n } else {\n throw new Error('VIN albo numer rejestracyjny jest wymagany.');\n }\n\n url.searchParams.set('key', apiKey);\n\n return (\n \n );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"automatyczny-wybór-galerii","__idx":15},"children":["Automatyczny wybór galerii"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 automatycznie wybiera najnowszą galerię przypisaną do przekazanego numeru VIN albo numeru rejestracyjnego."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Oznacza to, że w integracji nie trzeba znać identyfikatora ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]},". Wystarczy, że system klienta posiada VIN albo numer rejestracyjny pojazdu."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Przykład:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"txt","header":{"controls":{"copy":{}}},"source":"https://virtualcar360.pl/player/?vin=1NKCLR0X1XR568641&key=TWOJ_KLUCZ_API\n","lang":"txt"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W tym przypadku Player:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["wyszuka galerie przypisane do VIN ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1NKCLR0X1XR568641"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["wybierze najnowszą galerię,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["wyświetli ją w osadzonym widoku,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["uruchomi prezentację 360 zgodnie z konfiguracją galerii."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"player-360-a-api","__idx":16},"children":["Player 360 a API"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player 360 jest najprostszym sposobem prezentacji płynnego obrotu pojazdu, ponieważ nie wymaga samodzielnego pobierania klatek, obsługi sekwencji zdjęć ani implementowania mechanizmu zoomu."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Jeżeli chcesz samodzielnie zbudować własny interfejs galerii, użyj API. Typowy proces API wygląda wtedy następująco:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Pobierz najnowszą galerię po VIN albo numerze rejestracyjnym."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Odczytaj ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," galerii."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Przekaż ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," jako ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," do endpointu ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/image-set"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Pobierz zestawy zdjęć, hotspoty i linki do materiałów video."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Zbuduj własny interfejs prezentacji pojazdu."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W przypadku Playera 360 ten proces jest obsługiwany automatycznie przez komponent osadzony w ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]},"."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"bezpieczeństwo-i-dobre-praktyki","__idx":17},"children":["Bezpieczeństwo i dobre praktyki"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Używaj klucza API przypisanego do właściwej lokalizacji albo klucza grupowego, jeżeli Player 360 ma obsługiwać wiele lokalizacji."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Nie zapisuj prawdziwych kluczy API w publicznych repozytoriach."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dla wielu Playerów na jednej stronie stosuj ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading=\"lazy\""]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Player 360 najlepiej sprawdza się jako główny element multimedialny na stronie szczegółów pojazdu."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Na listingu ofert warto ograniczyć liczbę Playerów ładowanych jednocześnie."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dla urządzeń mobilnych ustaw szerokość ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," na ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100%"]}," i kontroluj wysokość przez responsywny kontener."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Nie należy zakładać, że klatki wygenerowane przez AI posiadają hotspoty."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Do szczegółowego oglądania detali wykorzystywane są oryginalne zdjęcia źródłowe."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"najczęstsze-problemy","__idx":18},"children":["Najczęstsze problemy"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"player-360-nie-wyświetla-galerii","__idx":19},"children":["Player 360 nie wyświetla galerii"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Sprawdź, czy:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["przekazano poprawny ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["przekazano poprawny ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["pojazd posiada galerię w systemie VirtualCar360,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["klucz API ma dostęp do lokalizacji, w której znajduje się pojazd,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["dla pojazdu dostępna jest galeria zgodna z konfiguracją Playera 360."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"player-360-pokazuje-inną-galerię-niż-oczekiwano","__idx":20},"children":["Player 360 pokazuje inną galerię niż oczekiwano"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player automatycznie wybiera najnowszą galerię dla danego pojazdu. Jeżeli pojazd posiada wiele galerii, wyświetlona zostanie najnowsza dostępna galeria."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"hotspoty-nie-są-widoczne-na-wszystkich-klatkach","__idx":21},"children":["Hotspoty nie są widoczne na wszystkich klatkach"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Klatki wygenerowane przez AI nie posiadają hotspotów. Hotspoty mogą występować tylko na oryginalnych zdjęciach, jeżeli zostały oznaczone w systemie VirtualCar360."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"zoom-przełącza-widok-na-inną-pozycję-samochodu","__idx":22},"children":["Zoom przełącza widok na inną pozycję samochodu"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Jest to oczekiwane zachowanie. Jeżeli użytkownik powiększa klatkę wygenerowaną przez AI, Player przewija samochód do najbliższej pozycji oryginalnego zdjęcia i wykonuje powiększenie na zdjęciu źródłowym."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"minimalny-przykład-produkcyjny","__idx":23},"children":["Minimalny przykład produkcyjny"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n \n
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vc360-player-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n}\n\n.vc360-player-wrapper iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]}]},"headings":[{"value":"Player 360","id":"player-360","depth":1},{"value":"Zastosowanie","id":"zastosowanie","depth":2},{"value":"Zasada działania","id":"zasada-działania","depth":2},{"value":"Różnice względem zwykłego Playera","id":"różnice-względem-zwykłego-playera","depth":2},{"value":"Generowanie klatek","id":"generowanie-klatek","depth":2},{"value":"Powiększanie zdjęcia","id":"powiększanie-zdjęcia","depth":2},{"value":"Hotspoty w Playerze 360","id":"hotspoty-w-playerze-360","depth":2},{"value":"Adres Playera 360","id":"adres-playera-360","depth":2},{"value":"Parametry URL","id":"parametry-url","depth":2},{"value":"Osadzenie Playera 360 po numerze VIN","id":"osadzenie-playera-360-po-numerze-vin","depth":2},{"value":"Osadzenie Playera 360 po numerze rejestracyjnym","id":"osadzenie-playera-360-po-numerze-rejestracyjnym","depth":2},{"value":"Responsywne osadzenie","id":"responsywne-osadzenie","depth":2},{"value":"Przykład użycia jako główny slider pojazdu","id":"przykład-użycia-jako-główny-slider-pojazdu","depth":2},{"value":"Dynamiczne generowanie adresu Playera 360","id":"dynamiczne-generowanie-adresu-playera-360","depth":2},{"value":"Przykład integracji w React","id":"przykład-integracji-w-react","depth":2},{"value":"Automatyczny wybór galerii","id":"automatyczny-wybór-galerii","depth":2},{"value":"Player 360 a API","id":"player-360-a-api","depth":2},{"value":"Bezpieczeństwo i dobre praktyki","id":"bezpieczeństwo-i-dobre-praktyki","depth":2},{"value":"Najczęstsze problemy","id":"najczęstsze-problemy","depth":2},{"value":"Player 360 nie wyświetla galerii","id":"player-360-nie-wyświetla-galerii","depth":3},{"value":"Player 360 pokazuje inną galerię niż oczekiwano","id":"player-360-pokazuje-inną-galerię-niż-oczekiwano","depth":3},{"value":"Hotspoty nie są widoczne na wszystkich klatkach","id":"hotspoty-nie-są-widoczne-na-wszystkich-klatkach","depth":3},{"value":"Zoom przełącza widok na inną pozycję samochodu","id":"zoom-przełącza-widok-na-inną-pozycję-samochodu","depth":3},{"value":"Minimalny przykład produkcyjny","id":"minimalny-przykład-produkcyjny","depth":2}],"frontmatter":{"seo":{"title":"Player 360"}},"lastModified":"2026-06-16T21:52:40.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/player/player360","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}