Página com o Player do Kinescope

# Iframe: Pseudo-Tela Cheia no iOS Em dispositivos iOS, ao entrar no modo de tela cheia, o navegador usa a API nativa de tela cheia, que pode entrar em conflito com os controles do player do Kinescope. Este script resolve o problema: ele preserva os controles originais e funciona corretamente com marcas d'água dinâmicas. ## Para quem é este artigo * **Desenvolvedores de aplicações web** — precisam garantir o comportamento correto de tela cheia no iOS * **Proprietários de conteúdo com marcas d'água** — precisam de exibição correta de marcas d'água dinâmicas no iOS * **Desenvolvedores frontend** — precisam configurar o comportamento do player em dispositivos móveis ## Quando você precisa do modo de pseudo-tela cheia no iOS Use este código se: - **Marcas d'água dinâmicas no iOS** — as marcas d'água devem ser exibidas corretamente no modo de tela cheia - **Preservando os controles do player** — é importante que os controles originais do player permaneçam acessíveis - **Comportamento correto no iOS** — é necessário comportamento correto de tela cheia em dispositivos iOS (Safari, Chrome para iOS) > **Информация:** **Limitações:** Funciona apenas em dispositivos iOS (Safari, Chrome para iOS). Não é necessário em outras plataformas — a API nativa de tela cheia funciona corretamente lá. ## **Como o script funciona (3 passos)** 1. **O player envia um evento** — quando o usuário entra ou sai do modo de tela cheia, o player envia um evento `KINESCOPE_PLAYER_FULLSCREEN_CHANGE`. 2. **O script manipula o evento** — salva os estilos atuais do iframe e aplica estilos de exibição em tela cheia (ou restaura os originais). 3. **Os controles são preservados** — os controles originais do player permanecem acessíveis, as marcas d'água dinâmicas funcionam corretamente. Agora vamos ver como configurar isso. ## **Configuração: passo 1 — adicionando o script à página** Coloque o script na página onde o player do Kinescope está incorporado, antes da tag de fechamento `` ou na seção ``. O script irá lidar automaticamente com todos os iframes do player do Kinescope na página. **Exemplo de posicionamento no HTML:** ```html Página com o Player do Kinescope ``` > **Внимание:** Certifique-se de que o script carrega após o DOM ser carregado, ou use o evento `DOMContentLoaded` para inicialização se colocar o script em ``. ## **Configuração: passo 2 — o código do script** Aqui está o código pronto para usar na sua página: ```javascript window.addEventListener('message', (event) => { if (event.data.type && event.data.type === 'KINESCOPE_PLAYER_FULLSCREEN_CHANGE') { const frames = document.getElementsByTagName('iframe'); for (let i = 0; i < frames.length; i++) { if (frames[i].contentWindow === event.source) { if (event.data.value) { // Salvar estilos originais if (!frames[i].dataset.originalStyles) { frames[i].dataset.originalStyles = frames[i].style.cssText; } // Aplicar estilos de tela cheia frames[i].style.cssText = ` background: #000; border: none; position: fixed; z-index: 9999; width: 100%; height: 100%; bottom: 0; right: 0; top: 0; left: 0;`; } else { // Restaurar estilos antigos se foram salvos if (frames[i].dataset.originalStyles) { frames[i].style.cssText = frames[i].dataset.originalStyles; delete frames[i].dataset.originalStyles; } else { frames[i].style.cssText = ''; } } break; } } } }); ``` ## **Como funciona (em detalhes)** Aqui está o que acontece quando um usuário abre a página com o player: 1. **O usuário abre a página** — o script começa a rastrear eventos de todos os iframes na página. 2. **O usuário entra no modo de tela cheia** — o player do Kinescope envia um evento `KINESCOPE_PLAYER_FULLSCREEN_CHANGE` com `value: true`. 3. **O script manipula o evento** — encontra o iframe correto pela fonte do evento, salva seus estilos atuais e aplica estilos de exibição em tela cheia. 4. **O usuário sai do modo de tela cheia** — o player envia um evento com `value: false`, o script restaura os estilos originais do iframe. ### **O evento `KINESCOPE_PLAYER_FULLSCREEN_CHANGE`** O player do Kinescope envia automaticamente este evento via `window.postMessage` quando: - O usuário entra no modo de tela cheia (`event.data.value === true`) - O usuário sai do modo de tela cheia (`event.data.value === false`) **Formato do evento:** ```javascript { type: 'KINESCOPE_PLAYER_FULLSCREEN_CHANGE', value: true // ou false } ``` ### **Gerenciamento de estilos do iframe** **Ao entrar em tela cheia:** 1. Os estilos atuais do iframe são salvos em `dataset.originalStyles` (para restaurar mais tarde) 2. São aplicados estilos de exibição em tela cheia: - Posição fixa (`position: fixed`) — o iframe permanece no lugar durante a rolagem - Tamanho de tela completo (`width: 100%`, `height: 100%`) — ocupa toda a tela - Z-index alto (`z-index: 9999`) — iframe acima dos outros elementos - Fundo preto (`background: #000`) — para exibição correta **Ao sair da tela cheia:** 1. Os estilos originais do iframe são restaurados a partir de `dataset.originalStyles` 2. Os estilos salvos são excluídos do `dataset` ### **Segurança** O script verifica que o evento se origina do iframe correto (`event.source` corresponde a `iframe.contentWindow`). Isso garante segurança ao trabalhar com múltiplos iframes na página — cada iframe é tratado de forma independente. **Como funciona:** ```text 1. Receber evento do iframe 2. Verificar: event.source === iframe.contentWindow 3. Se corresponder — manipular o evento 4. Se não corresponder — ignorar ``` ## **Exemplos de uso** ### **Exemplo 1: Integração simples** Se você tiver um player na página, o código acima funcionará imediatamente: ```html ``` ### **Exemplo 2: Múltiplos players na página** Se houver múltiplos players na página, o script irá lidar com cada um de forma independente: ```html ``` ### **Exemplo 3: Usando com frameworks** Se você usa React, Vue ou outro framework, coloque o script no componente que é montado após o carregamento do DOM: **React:** ```javascript import { useEffect } from 'react'; function VideoPlayer() { useEffect(() => { // Código de manipulação de tela cheia // ... (insira o código do passo 2) }, []); return