¿Por qué no usar la etiqueta de video?

Una etiqueta de video HTML simple con un MP4 sirve para un bucle de diez segundos, y luego deja de servir. Los archivos grandes se atascan en conexiones lentas, los formatos varían entre navegadores y tu propio hosting paga el ancho de banda cada vez que alguien pulsa reproducir. Un reproductor incrustado lo invierte. El archivo vive en FileHost.net, la transmisión se adapta a la conexión del espectador y tu página solo carga un iframe pequeño.

Qué incluye realmente el reproductor

La reproducción funciona con un reproductor basado en Video.js que transmite HLS. Los espectadores tienen pantalla completa, un menú de velocidad, atajos de teclado para reproducir, saltar, volumen, silencio y pantalla completa, un modo cine que atenúa la página y miniaturas en la línea de tiempo que se generan automáticamente tras la subida. Los subtítulos se añaden como archivos SRT, en 45 idiomas a elegir, y el reproductor puede iniciar con una pista de subtítulos ya activada si lo prefieres.

Los propietarios pueden definir el ancho y el alto del embed, añadir su logo, elegir una imagen de portada o póster y, en premium, cambiar el color del reproductor para que combine con el sitio. Los usuarios avanzados pueden conectar una etiqueta de anuncios VAST o ajustes de pop desde el panel.

Funciones del player

Verificado con el código del reproductor, no es una lista de deseos.

Streaming HLS

La entrega por segmentos permite iniciar rápido y saltar con fluidez, incluso en videos largos.

Subtítulos

Carga pistas SRT por idioma, actívalas desde el reproductor o empieza con subtítulos activados.

Velocidad y atajos

Un menú de velocidad y controles de teclado cubren reproducir, saltar, volumen, silencio, pantalla completa y modo cine.

Modo cine

Atenúa el resto de la página para que el video sea el protagonista y vuelve con una sola tecla.

Previews en la barra

Las miniaturas al pasar el cursor se crean al procesar, para encontrar un momento sin adivinar.

Tu marca

Añade un logo, elige la portada, define el tamaño del embed y, en premium, el color del reproductor.

Inserta un video en cinco pasos

  1. 1Sube el video y espera a que aparezca como listo en tu lista de videos.
  2. 2Abre el video y elige la pestaña de embed. El código por defecto es un iframe de 600 por 480 píxeles que puedes redimensionar.
  3. 3Copia el código y pégalo en la vista HTML de tu página o en un bloque HTML personalizado de tu editor.
  4. 4Hazlo adaptable envolviendo el iframe en un contenedor con proporción 16 por 9, algo que la mayoría de los temas ya incluye.
  5. 5Abre la página en una ventana privada en un celular y en una computadora para confirmar la reproducción y el tamaño antes de publicar.

Código embed

Iframe básico

Esta es la estructura que genera el panel. Sustituye el código por el ID público de tu propio video.

<iframe width="600" height="480" src="https://filehost.net/e/YOUR_CODE" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>

Contenedor adaptable

Un pequeño contenedor mantiene la proporción 16 por 9 en cualquier ancho de pantalla. Añádelo a tu hoja de estilos y usa el mismo iframe dentro.

<div style="position:relative;aspect-ratio:16/9;max-width:100%">
  <iframe src="https://filehost.net/e/YOUR_CODE"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    allowfullscreen="true"></iframe>
</div>

Rendimiento y consideraciones SEO

Un iframe está aislado de tus propios scripts, así que no ralentiza tu diseño ni choca con tu tema, pero los buscadores consideran que el video pertenece a la dirección incrustada. Acompaña el embed con un título descriptivo, un breve resumen escrito y una transcripción en tu propia página para que el contenido siga posicionando. Añade el atributo loading con valor lazy al iframe cuando el video quede fuera de la primera pantalla.

Como el trabajo pesado ocurre en otro sitio, tu factura de hosting no sube cuando el tráfico se dispara. Es el mayor beneficio práctico para sitios pequeños en hosting compartido.

Monetizar vistas incrustadas

Las vistas del reproductor incrustado cuentan para las ganancias con la misma tarifa que la página de reproducción, así que un artículo popular puede pagarse solo. También puedes mostrar tus propios anuncios VAST dentro del reproductor; el tráfico servido mientras tus anuncios están activos sale del ancho de banda premium, que cuesta una tarifa fija de 2 dólares por terabyte. Lee las reglas de ganancias antes de basar un plan de negocio en ello.

Solución de problemas

Si el reproductor muestra un cuadro en blanco, comprueba que tu página no bloquee marcos de terceros con una política de seguridad de contenido. Si los subtítulos no aparecen, confirma que la pista se añadió al video correcto y está en formato SRT. Si la página se ve mal en celulares, sustituye el ancho y alto fijos por el contenedor adaptable de arriba.

FileHost.net frente a otros

Insertar desde un servicio tipo nube suele dar un marco de vista previa torpe. Mira en qué se diferencian los reproductores.

Ver todas las comparativas

Herramientas y guías relacionadas

¿Listo para probarlo?

Sube un clip, copia el iframe y pégalo en una página de prueba. En cinco minutos sabrás si el reproductor encaja en tu sitio.

Preguntas frecuentes

Sube el video, abre su pestaña de embed, copia el código iframe y pégalo en el HTML de tu página.

Sí. Añade archivos SRT en cualquiera de los 45 idiomas y los espectadores podrán activarlos desde el reproductor.

Sí. Define el ancho y el alto en el código, o usa un contenedor adaptable para que se ajuste a la página.

Puedes añadir tu propio logo. El color personalizado del reproductor es parte de premium, y los anuncios o el logo se pueden quitar con ancho de banda premium.

Sí. Las vistas en videos incrustados cuentan con la misma tarifa que las de la página de reproducción.