Un video reel es un video corto, generalmente de 15 a 60 segundos, que se puede crear y compartir actualmente en plataformas de redes sociales como Instagram, Facebook y YouTube. Los reels suelen ser verticales y están diseñados para ser atractivos y entretenidos.

Mediastream Platform se complace en presentar esta solución JavaScript que optimiza la experiencia de video vertical. Impulsada por IA, ofrece recomendaciones personalizadas, automatización de contenido y compatibilidad total con las funciones de monetización actuales.

Configuración

En las siguientes instrucciones, encontrarás una guía detallada para la configuración de esta herramienta.

1. Playlist

Para empezar, categoriza tus clips en Platform y crea una playlist. Te recomendamos una playlist Smart, ya que actualiza automáticamente los contenidos asociados a las categorías y tags, ahorrándote tiempo. Si necesitas mostrar contenido específico, opta por una playlist manual. Nombra la playlist para identificarla fácilmente en el flujo de reels. Debes incluir la playlist a la misma categoría asociada a tus videos.

2. Player

Dirígete a Settings > Players y crea un nuevo player de video. En la sección Design, elige el tipo Reels. Ten en cuenta que este player tiene un diseño predefinido, con un botón para activar o desactivar el sonido, los slides de navegación y la barra de la linea de tiempo, pero puedes aplicar ajustes CSS personalizados.

A continuación, accede a la sección Post Video. Habilita la opción correspondiente y selecciona la playlist previamente configurada. El número de elementos a mostrar puede mantenerse en el valor predeterminado (3). Asegúrate de guardar los cambios para aplicar la configuración hecha.

Implementación

Una vez realizados estos pasos iniciales, es momento de configurar los reels. Para facilitarte esta tarea, te entregamos un ejemplo con código que puedes usar como guía para tu propia implementación. Recuerda que cualquier modificación deberá ser realizada por tu desarrollador.

HTML

Este código HTML estructura la base para la reproducción de los Reels. Un botón activaría la carga dinámica de videos en un contenedor designado. La reproducción se realiza con nuestro player integrado y un script JS de control que se compartirá más abajo.

Ejemplo index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo Reels</title>
  <link rel="stylesheet" href="styles.css">
  
</head>
<body>
  <header class="header">
    <h1>Ejemplo Reels</h1>
    <button id="reels-button" class="button">Reels</button>
  </header>
  <div id="video-container" class="video-cards">
    <!-- Las tarjetas se generarán aquí dinámicamente -->
  </div>

  <!-- Contenedor emergente -->
  <div id="overlay" class="overlay hidden">
    <div id="video-popup" class="video-popup">
      <!-- Contenido dinámico -->
    </div>
    <button id="close-overlay" class="close-button">X</button>
  </div>

<script type='text/javascript' src='https://player.cdn.mdstrm.com/lightning_player/api.js'></script></div>

<script src="index.js"></script>

</body>
</html>

CSS

Este CSS estiliza la interfaz de usuario para la reproducción de los Reels, con un diseño de cuadrícula para los thumbnails de los videos de la playlist, un botón que activa la reproducción y una superposición para destacar el video seleccionado. Se define un tema oscuro, con efectos visuales y adaptación a pantallas pequeñas. Los estilos para este ejemplo se configuran acorde al branding de Mediastream.

Ejemplo style.css

/* General */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Proxima Nova, sans-serif;
  background-color: #1A1A1A;
  color: #97d700;
  padding: 20px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 26px;
}

.button {
  background-color: #9E77E5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.4s ease;
}

.button:hover {
  background-color: #6841AB;
}

/* Tarjetas */
.video-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.card {
  background-color: #1A1A1A;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card p {
  padding: 10px;
  font-size: 14px;
  line-height: 1.4;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay.hidden {
  display: none;
}

.video-popup {
  background-color: #000;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Botón de cierre */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4500;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

/* Estilo para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .video-popup {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border-radius: 0; /* Elimina bordes redondeados para ocupar toda la pantalla */
  }
}

JS

Este script JS habilita la reproducción dinámica de los Reels. Se conecta a la API usando los IDs del video inicial y del player configurado para obtener la información necesaria. Genera además las tarjetas de los videos con los thumbnails y títulos. Al hacer clic en una tarjeta, redirige al usuario al reproductor con el ID del video. Se asigna a la vez un botón "Reels" que ofrece acceso directo al video inicial.

Ejemplo index.js

const container = document.getElementById('video-container');
const reelsButton = document.getElementById('reels-button'); // Botón "Reels"

//CONFIGURACIÓN INICIAL
var cantidad_display = 4; //indica la cantidad de tarjetas a mostrar
var media_inicial = 'pegar el ID del media';
var reels_player = 'pegar el ID del player';
//TERMINA CONFIGURACIÓN INICIAL

const API_URL = 'https://mdstrm.com/api/media/'+media_inicial+'/related?reels=true&display='+cantidad_display+'&player='+reels_player;

// Función para obtener datos de la API
async function fetchVideos() {
  try {
    const response = await fetch(API_URL);
    const data = await response.json();
    const videos = data.medias;

    renderVideos(videos);
  } catch (error) {
    console.error('Error al obtener los videos:', error);
  }
}

// Función para renderizar las tarjetas
function renderVideos(videos) {
  videos.forEach(video => {
    const card = document.createElement('div');
    card.className = 'card';

    card.innerHTML = `
      <img src="${video.thumbnail}" alt="${video.title}">
      <p>${video.title}</p>
    `;

    // Añadir evento de clic para redirigir al reproductor
    card.addEventListener('click', () => redirectToPlayer(video._id));

    container.appendChild(card);
  });
}

// Función para redirigir al reproductor en una nueva página function redirectToPlayer(videoId) { window.location.href = `player.html?id=${videoId}`;
}

// Evento para el botón "Reels"
reelsButton.addEventListener('click', () => {
  redirectToPlayer(media_inicial); // Redirigir al reproductor con un ID fijo
});

// Llamar a la función para obtener y renderizar los videos
fetchVideos();

En estas variables del código, el objetivo es ajustar la cantidad de videos visibles en el contenedor inicial, permitir la selección de cualquier video de la playlist como el inicial y reemplazar el player.

var cantidad_display = 4;
var media_inicial = 'xXXxXXXXxxxxXXXxx';
var reels_player = 'xXXxXXXXxxxxXXXxx';

HTML Player

Este código HTML carga dinámicamente el player de Mediastream, obteniendo el videoId desde la URL. Si es válido, inicializa el reproductor en #video-container; de lo contrario, muestra un mensaje de error.

Ejemplo player.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reproductor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css" rel="stylesheet">
    *,
    *::before,
    *::after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    html, body {
      padding: 0;
      margin: 0;
    }
    #video-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
  <script src="https://player.cdn.mdstrm.com/lightning_player/api.js"></script>
</head>
<body>
  <div id="video-container">
    <!-- Aquí se inyectará dinámicamente el reproductor -->
  </div>

  <script>
    // Obtener el ID del video desde los parámetros de la URL
    const urlParams = new URLSearchParams(window.location.search);
    const videoId = urlParams.get('id'); // Obtiene el "id" del video

    if (videoId) {
      const playerId = 'pegar el ID del player'
      loadMSPlayer('video-container', {
        type: 'media',
        id: videoId,
        player: playerId,
        autoplay: true,
        appName: 'reels'
      }).then(function(player) {
        player.on('ready', function() {
          console.log('player ready')
        })
      }).catch(function(error) {
        console.error('Error loading player:', error)
      })
    } else {
      document.body.innerHTML = '<p>Error: No se encontró un ID de video válido.</p>';
    }
  </script>
</body>
</html>

La implementación se desplegará de la siguiente manera acorde al ejemplo entregado:

Al hacer clic en uno de los videos o en el botón Reels se abrirá la página con nuestro reproductor. En la esquina inferior derecha, se desplegarán los controles deslizantes para navegar entre los videos asignados a la playlist.

Para tener en cuenta:

El player.html al que se redirecciona la reproducción debe contener el mismo ID por defecto configurado en el JS.
Se pueden asignar clips en formato horizontal; sin embargo, estos mostrarán barras negras en la parte superior e inferior.
Se recomienda que los clips compartan al menos una misma calidad de video para garantizar una experiencia de reproducción uniforme.
Los clips se reproducen en un bucle continuo, y es necesario avanzar con los controles deslizantes para recorrer la playlist asignada.
Independientemente de la cantidad de clips asignados a la playlist, todos se reproducirán sin inconvenientes dentro de los Reels. El reproductor no aplicará la sugerencia de tres videos configurada en la opción de post-video.
La función estará disponible inicialmente para la versión web y web responsive.

Si tienes alguna pregunta, no dudes en escribirnos a través del chat. Estaremos encantados de ayudarte.

Atte. El Equipo de Mediastream