Teste de Midia - TikTok

Pagina de teste com 3 abordagens: MP4 nativo, JSMpeg Canvas (click), e JSMpeg Auto-scroll. O objetivo e encontrar uma alternativa ao WebP animado que funcione no browser do TikTok.

TikTok Browser:NAO - Browser normal

User Agent:

CDN Base:

https://media.lovepanda.com.br/static/br/

1. MP4 Nativo (<video>)

Referencia — funciona em browsers normais, tela cheia no TikTok

iPhone Preview

iPhone: Hero Landing (mainVideo)

Componente Iphone15Pro com MP4

iPhone: Wrapped - Timeline

Componente Iphone15Pro com MP4

iPhone: Wrapped - Star Map

Componente Iphone15Pro com MP4

Hero + 404

Hero Landing (mainVideo)

https://media.lovepanda.com.br/static/br/videos/landing/mainVideo.mp4

Carregando...

404 Panda

https://media.lovepanda.com.br/static/br/videos/panda/404.mp4

Carregando...

Mascot

Mascot: Mascot - Idle

Carregando...

Mascot: Mascot - Greetings

Carregando...

Mascot: Mascot - Happy

Carregando...

Mascot: Mascot - Talking

Carregando...

Wrapped Sections

Wrapped - Timeline

https://media.lovepanda.com.br/static/br/videos/wrapped/timeline.mp4

Carregando...

Wrapped - Star Map

https://media.lovepanda.com.br/static/br/videos/wrapped/starMap.mp4

Carregando...

Wrapped - Image Gallery

https://media.lovepanda.com.br/static/br/videos/wrapped/imageGallery.mp4

Carregando...

Wrapped - Roulette

https://media.lovepanda.com.br/static/br/videos/wrapped/roulette.mp4

Carregando...

Wrapped - Intro

https://media.lovepanda.com.br/static/br/videos/wrapped/intro.mp4

Carregando...

Wrapped - IntroWrapped Section

https://media.lovepanda.com.br/static/br/videos/wrapped/introWrapped.mp4

Carregando...

2. JSMpeg Canvas (MPEG-TS)

Renderiza no <canvas> — sem <video>, sem fullscreen. Clique "Abrir" para testar cada um.

Hero Landing (mainVideo)

https://media.lovepanda.com.br/static/br/videos/landing/mainVideo.ts

Fechado

Clique em "Abrir" para testar

Mascot - Idle

https://media.lovepanda.com.br/static/br/videos/panda/idle.ts

Fechado

Clique em "Abrir" para testar

Mascot - Greetings

https://media.lovepanda.com.br/static/br/videos/panda/greetings.ts

Fechado

Clique em "Abrir" para testar

Mascot - Happy

https://media.lovepanda.com.br/static/br/videos/panda/happy.ts

Fechado

Clique em "Abrir" para testar

Mascot - Talking

https://media.lovepanda.com.br/static/br/videos/panda/talking.ts

Fechado

Clique em "Abrir" para testar

Wrapped - Timeline

https://media.lovepanda.com.br/static/br/videos/wrapped/timeline.ts

Fechado

Clique em "Abrir" para testar

Wrapped - Star Map

https://media.lovepanda.com.br/static/br/videos/wrapped/starMap.ts

Fechado

Clique em "Abrir" para testar

Wrapped - Image Gallery

https://media.lovepanda.com.br/static/br/videos/wrapped/imageGallery.ts

Fechado

Clique em "Abrir" para testar

Wrapped - Roulette

https://media.lovepanda.com.br/static/br/videos/wrapped/roulette.ts

Fechado

Clique em "Abrir" para testar

Wrapped - Intro

https://media.lovepanda.com.br/static/br/videos/wrapped/intro.ts

Fechado

Clique em "Abrir" para testar

Wrapped - IntroWrapped Section

https://media.lovepanda.com.br/static/br/videos/wrapped/introWrapped.ts

Fechado

Clique em "Abrir" para testar

3. JSMpeg Auto-Scroll

Inicia automaticamente quando voce scrollar ate aqui (IntersectionObserver 50%)

404 Panda

https://media.lovepanda.com.br/static/br/videos/panda/404.ts

Carregando...Fora da tela