SDK do iframe
Conecte-se a um player incorporado em iframe
O embed em iframe carrega o player do converteai.net num contexto de navegação separado. Sua página não alcança o interior dele, então o SDK abre um canal de mensagens entre os dois e entrega um IframePlayer com os mesmos métodos e eventos do elemento.
Carregar o SDK
O SDK é um único script, carregado uma vez por página independente de quantos players ele atende:
<script type="text/javascript">
var s = document.createElement("script");
s.src = "https://scripts.converteai.net/lib/js/smartplayer-wc/v4/sdk.js";
s.async = !0;
document.head.appendChild(s);
</script>
<div id="ifr_PLAYER_ID_wrapper" style="margin: 0 auto; width: 100%;">
<div id="ifr_PLAYER_ID_aspect" style="position: relative; padding: 56.25% 0 0 0;">
<iframe
id="ifr_PLAYER_ID"
src="about:blank"
frameborder="0"
allowfullscreen
referrerpolicy="origin"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
onload="this.onload=null, this.src='https://scripts.converteai.net/ACCOUNT_ID/players/PLAYER_ID/v4/embed.html'+(location.search||'?')+'&vl='+encodeURIComponent(location.href)"
></iframe>
</div>
</div>
O iframe começa em about:blank e troca para o embed real no handler de onload. Isso não é decoração: é assim que a URL do embed captura o location.href e o repassa como vl, que o player usa para atribuir a visualização à página em que está.
Esperar a conexão
O player é inutilizável até a ponte subir. O SDK anuncia isso com o iframe:connected, despachado no <iframe> e que sobe até o document:
// don't call methods before the connection:
// window.vturbSdk.get("PLAYER_ID") returns undefined until then,
// and window.vturbSdk itself is undefined until the SDK script loads
document.addEventListener("iframe:connected", (event) => {
// identify which player connected
if (event.detail.id !== "PLAYER_ID") return;
const player = event.detail.player;
// the iframe player is connected now
player.fullscreen();
});
// or, listening on the iframe element itself
const iframe = document.getElementById("ifr_PLAYER_ID");
iframe.addEventListener("iframe:connected", (event) => {
const player = event.detail.player;
// do something
});
Como o evento dispara para cada player da página, o event.detail.id é o que permite distingui-los. O window.vturbSdk.get(playerId) devolve o mesmo player depois da conexão. Antes disso ele devolve undefined, e o próprio window.vturbSdk é undefined até o script do SDK carregar, então um método chamado em qualquer um dos dois lança erro.
O player:ready nunca dispara no iframe. Código que o espera espera
para sempre. O iframe:connected é o equivalente.
O que você abre mão
O SDK faz a ponte da API, não da renderização. Variáveis CSS, atributos e injectUrlUpdater ficam do lado do elemento, e o JS personalizado da headline não roda sob uma Content Security Policy. Elemento vs iframe traz a comparação completa.