Streaming de vídeo en un sitio web desde Kontainer

Función del plan Enterprise o módulo adicional

Haz streaming de vídeos directamente desde Kontainer a sitios web y tiendas en línea. Descubre más y empieza hoy mismo. Reserva una reunión con Customer Success.

Una vez activada la herramienta de streaming de vídeo, ya puedes empezar. Sigue los sencillos pasos de abajo para obtener un enlace de incrustación a medida o para crear una plantilla de formato de vídeo.

Activar la CDN de vídeo

Busca tu archivo de vídeo y ábrelo en el modo galería. Comprueba que la barra de información, a la derecha de la imagen, esté abierta, o ábrela con el icono «i» de la barra de menú superior.

Al final del menú de información encontrarás la opción para activar la CDN de vídeo.

Al marcar la casilla Activar, Kontainer empieza a convertir el archivo de vídeo para que esté disponible en distintos tamaños. Puede tardar unos minutos, así que puedes dedicarte a otras tareas y actualizar la ventana para ver cuándo termina la conversión.
Activar la CDN de vídeo para el streaming de vídeo de Kontainer

Ajustes de incrustación

Cuando termina la conversión, obtienes una URL que puedes copiar y una opción de ajustes de incrustación para personalizar tu enlace de incrustación IFRAME o HTML.

Entre las opciones:

  • Reproducción automática
  • Vídeo en bucle
  • Sonido silenciado
  • Ocultar los controles
  • Tamaños
  • Permitir la descarga (debe activarse antes de abrir los ajustes de incrustación)

Ajustes de incrustación del streaming de vídeo de Kontainer

Para que sea más rápido y fácil para tus compañeros y para los usuarios externos, puedes crear presets.

Presets

En Recursos y Presets de vídeo puedes crear tus propios formatos de selección rápida con las mismas opciones que los ajustes de incrustación.
Ajustes de los presets del streaming de vídeo de Kontainer

Copiar el enlace IFRAME o HTML

Cuando estés conforme con los ajustes, solo tienes que copiar el enlace IFRAME o HTML y pegarlo en tu sitio web.
Copiar el enlace final en los ajustes de incrustación de la herramienta de streaming de vídeo de Kontainer
Así de fácil.

Cuéntanos qué tal te va y, si tienes cualquier duda, haz clic aquí para escribir a Customer Success.

Tipos de archivo admitidos

Nuestra herramienta de streaming de vídeo admite los siguientes tipos de archivo:

'3gp',
'asf',
'avi',
'avs',
'dv',
'dvd',
'f4v',
'flic',
'flv',
'hevc',
'm1v',
'm2ts',
'm2v',
'm4v',
'm4p',
'mjpeg',
'mkv',
'mov',
'mp2',
'mp4',
'mp4v',
'mpeg',
'mpg',
'mpe',
'mpv',
'mts',
'mxf',
'ogv',
'psp',
'rm',
'swf',
'ts',
'vcd',
'vob',
'webm',
'wmv',
'wtv',

Subtítulos automáticos

Kontainer puede transcribir automáticamente el audio hablado de un vídeo y generar subtítulos, para que no tengas que crearlos a mano ni depender de otra herramienta.

Para iniciar la transcripción, haz clic en la opción CC y en «Añadir subtítulo».

Detección del idioma

El idioma hablado se puede detectar automáticamente, o puedes elegir tú un idioma concreto antes de iniciar la transcripción. No hay límite en el número de idiomas para los que puedes generar subtítulos.

La ventana CC

Una vez que existe una transcripción, se gestiona desde la ventana CC. Desde ella puedes:

  1. Traducir la transcripción a otros idiomas
  2. Editar la transcripción (texto y tiempos)
  3. Descargar la transcripción como archivo .srt
  4. Duplicar una transcripción existente
  5. Eliminar los subtítulos de cualquier idioma seleccionado

Cuando termina la transcripción, Kontainer genera automáticamente una pista de subtítulos para el vídeo.

Subtítulos automáticos generados en la herramienta de streaming de vídeo de Kontainer DAM

Subir subtítulos existentes

Si ya tienes un archivo de subtítulos de un vídeo, puedes subirlo directamente en lugar de generar uno nuevo. Solo se admiten archivos .srt para la subida.

Añadir subtítulos a los vídeos con la herramienta de streaming de vídeo de Kontainer DAM

Nota: los subtítulos no están activados por defecto durante la reproducción; los espectadores deben activarlos desde el menú de tres puntos de la esquina inferior derecha del reproductor de vídeo.

Controles del reproductor de vídeo disponibles

Los desarrolladores pueden controlar el reproductor de vídeo por programación enviándole mensajes con postMessage. El reproductor puede recibir estos mensajes y realizar acciones como reproducir, pausar, cambiar el volumen o pasar a pantalla completa, sin que el usuario tenga que hacer clic en el propio reproductor.

Esto funciona incluso si el vídeo está incrustado en otra página o dentro de un iframe.

A continuación encontrarás la lista de controles disponibles para el reproductor de vídeo:

Controles de reproducción

  • Reproducir (Play)
    window.postMessage({ type: 'kontainer-video-player', action: 'play' });

  • Pausar (Pause)
    window.postMessage({ type: 'kontainer-video-player', action: 'pause' });

  • Detener (Stop)
    window.postMessage({ type: 'kontainer-video-player', action: 'stop' });

Controles de audio

  • Silenciar (Mute)
    window.postMessage({ type: 'kontainer-video-player', action: 'mute' });

  • Activar el sonido (Unmute)
    window.postMessage({ type: 'kontainer-video-player', action: 'unmute' });

  • Alternar el silencio (Toggle Mute)
    window.postMessage({ type: 'kontainer-video-player', action: 'toggleMute' });

  • Definir el volumen (Set Volume, de 0,0 a 1,0)
    window.postMessage({ type: 'kontainer-video-player', action: 'setVolume', data: { volume: 0.5 } });

Posición de reproducción

  • Saltar a un punto (Seek, en segundos)
    window.postMessage({ type: 'kontainer-video-player', action: 'seek', data: { time: 60 } });

Controles de pantalla completa

  • Pantalla completa (Fullscreen)
    window.postMessage({ type: 'kontainer-video-player', action: 'fullscreen' });

  • Salir de la pantalla completa (Exit Fullscreen)
    window.postMessage({ type: 'kontainer-video-player', action: 'exitFullscreen' });

  • Alternar la pantalla completa (Toggle Fullscreen)
    window.postMessage({ type: 'kontainer-video-player', action: 'toggleFullscreen' });

Calidad de vídeo

  • Definir la calidad (Set Quality)
    window.postMessage({ type: 'kontainer-video-player', action: 'setQuality', data: { quality: 720 } });

    • 0 = automática

    • O resoluciones concretas, como 360, 480, 720, etc.

Dirigirse a un reproductor concreto por ID

  • Enviar la acción a una instancia concreta del reproductor
    window.postMessage({ type: 'kontainer-video-player', action: 'play', targetPlayerId: 'player_12345' });

    Nota: el playerId se puede definir con el parámetro de URL ?playerId=your_custom_id o se genera a partir del origen del vídeo.

Uso en iFrames

  • Los mismos comandos, pero enviando los mensajes al contentWindow del iframe.

    Ejemplo:
    const iframe = document.getElementById('your-iframe-id');

    iframe.contentWindow.postMessage({ type: 'kontainer-video-player', action: 'play' });