SDK del iframe
Conéctate a un reproductor incrustado en un iframe
La incrustación en iframe carga el reproductor desde converteai.net en un contexto de navegación separado. Tu página no alcanza su interior, así que el SDK abre un canal de mensajes entre ambos y te entrega un IframePlayer con los mismos métodos y eventos que el elemento.
Cargar el SDK
El SDK es un único script, cargado una vez por página sin importar a cuántos reproductores sirva:
<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>
El iframe empieza en about:blank y cambia a la incrustación real en su handler de onload. No es decoración: así es como la URL de la incrustación captura location.href y lo pasa como vl, que el reproductor necesita para atribuir la vista a la página en la que está.
Esperar la conexión
El reproductor es inutilizable hasta que el puente está arriba. El SDK lo anuncia con iframe:connected, despachado en el <iframe> y que sube hasta 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 el evento se dispara para cada reproductor de la página, event.detail.id es lo que permite distinguirlos. window.vturbSdk.get(playerId) devuelve el mismo reproductor tras la conexión. Antes devuelve undefined, y el propio window.vturbSdk es undefined hasta que carga el script del SDK, así que un método llamado sobre cualquiera de los dos lanza error.
player:ready nunca se dispara en el iframe. El código que lo espera
espera para siempre. iframe:connected es el equivalente.
A qué renuncias
El SDK tiende el puente de la API, no del renderizado. Variables CSS, atributos e injectUrlUpdater se quedan del lado del elemento, y el JS personalizado del titular no corre bajo una Content Security Policy. Elemento vs iframe tiene la comparación completa.