Um vídeo reel é um vídeo curto, geralmente de 15 a 60 segundos, que pode ser criado e compartilhado atualmente em plataformas de redes sociais como Instagram, Facebook e YouTube. Os reels costumam ser verticais e são projetados para serem envolventes e divertidos.

A Mediastream Platform tem o prazer de apresentar esta solução JavaScript que otimiza a experiência de vídeo vertical. Impulsionada por IA, oferece recomendações personalizadas, automação de conteúdo e total compatibilidade com os recursos de monetização atuais.

Configuração

Nas instruções a seguir, você encontrará um guia detalhado para a configuração desta ferramenta.

1. Playlist

Para começar, categorize seus clipes na Platform e crie uma playlist. Recomendamos uma playlist Smart, pois ela atualiza automaticamente os conteúdos associados às categorias e tags, economizando seu tempo. Se precisar exibir um conteúdo específico, opte por uma playlist manual. Nomeie a playlist para identificá-la facilmente no fluxo de reels. Certifique-se de incluir a playlist na mesma categoria associada aos seus vídeos.

2. Player

Vá até Settings > Players e crie um novo player de vídeo. Na seção Design, selecione o tipo Reels. Lembre-se de que esse player tem um design predefinido, com um botão para ativar ou desativar o som, slides de navegação e a barra de linha do tempo, mas você pode aplicar ajustes personalizados em CSS

Em seguida, acesse a seção Post Video. Ative a opção correspondente e selecione a playlist previamente configurada. O número de elementos a exibir pode ser mantido no valor padrão (3). Certifique-se de salvar as alterações para aplicar a configuração realizada.

Implementação

Depois de concluir essas etapas iniciais, é hora de configurar os reels. Para facilitar essa tarefa, fornecemos um exemplo de código que você pode usar como guia para sua própria implementação. Lembre-se de que qualquer modificação deverá ser feita pelo seu desenvolvedor.

HTML

Este código HTML estrutura a base para a reprodução dos Reels. Um botão ativará o carregamento dinâmico de vídeos em um contêiner designado. A reprodução é feita com nosso player integrado e um script JS de controle, que será compartilhado abaixo.

Exemplo index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo Reels</title>
  <link rel="stylesheet" href="styles.css">
  
</head>
<body>
  <header class="header">
    <h1>Exemplo Reels</h1>
    <button id="reels-button" class="button">Reels</button>
  </header>
  <div id="video-container" class="video-cards">
    <!-- As cartas serão geradas aqui dinamicamente -->
  </div>

  <!-- Contêiner emergente -->
  <div id="overlay" class="overlay hidden">
    <div id="video-popup" class="video-popup">
      <!-- Conteúdo 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 a interface do usuário para a reprodução dos Reels, com um design de grade para os thumbnails dos vídeos da playlist, um botão que ativa a reprodução e uma sobreposição para destacar o vídeo selecionado. Um tema escuro é definido, com efeitos visuais e adaptação para telas pequenas. Os estilos deste exemplo são configurados de acordo com a identidade visual da Mediastream.

Exemplo 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 telas pequenas (dispositivos móveis) */
@media (max-width: 768px) {
  .video-popup {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border-radius: 0; /* Remova bordas arredondadas para ocupar toda a tela */
  }
}

JS

Este script JS habilita a reprodução dinâmica dos Reels. Ele se conecta à API usando os IDs do vídeo inicial e do player configurado para obter as informações necessárias. Além disso, gera as cartas dos vídeos com os thumbnails e títulos. Ao clicar em uma carta, o usuário é redirecionado para o reprodutor com o ID do vídeo. Também é atribuído um botão "Reels" que oferece acesso direto ao vídeo inicial.

Exemplo index.js

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

//CONFIGURAÇÃO INICIAL
var cantidad_display = 4; //indica a quantidade de cartas a exibir
var media_inicial = 'Obter o ID da mídia';
var reels_player = 'Obter o ID do player';
//FINALIZA CONFIGURAÇÃO INICIAL

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

// Função para obter dados da 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('Erro ao obter os vídeos:', error);
  }
}

// Função para renderizar as cartas
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>
    `;

    // Adicionar evento de clique para redirecionar ao reprodutor
    card.addEventListener('click', () => redirectToPlayer(video._id));

    container.appendChild(card);
  });
}

// Função para redirecionar ao reprodutor em uma nova página function redirectToPlayer(videoId) { window.location.href = `player.html?id=${videoId}`;
}

// Evento para o botão "Reels"
reelsButton.addEventListener('click', () => {
  redirectToPlayer(media_inicial); // Redirecionar ao reprodutor com um ID fixo
});

// Chamar a função para obter e renderizar os vídeos
fetchVideos();

Nestas variáveis do código, o objetivo é ajustar a quantidade de vídeos visíveis no contêiner inicial, permitir a seleção de qualquer vídeo da playlist como o inicial e substituir o player.

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

HTML Player

Este código HTML carrega dinamicamente o player da Mediastream, obtendo o videoId a partir da URL. Se for válido, inicializa o reprodutor em #video-container; caso contrário, exibe uma mensagem de erro.

Exemplo 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">
    <!-- Aqui o reprodutor será injetado dinamicamente -->
  </div>

  <script>
    // Obter o ID do vídeo a partir dos parâmetros da URL
    const urlParams = new URLSearchParams(window.location.search);
    const videoId = urlParams.get('id'); // Obtiene el "id" del video

    if (videoId) {
      const playerId = 'Obter o ID do 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>Erro: Nenhum ID de vídeo válido foi encontrado.</p>';
    }
  </script>
</body>
</html>

A implementação será implantada da seguinte forma, de acordo com o exemplo fornecido:

Ao clicar em um dos vídeos ou no botão Reels, a página será aberta com o nosso reprodutor. No canto inferior direito, os controles deslizantes serão exibidos para navegar entre os vídeos atribuídos à playlist.

Para levar em consideração:

O player.html para o qual a reprodução é redirecionada deve conter o mesmo ID padrão configurado no JS.
É possível atribuir clipes em formato horizontal; no entanto, eles exibirão barras pretas na parte superior e inferior.
Recomenda-se que os clipes tenham pelo menos a mesma qualidade de vídeo para garantir uma experiência de reprodução uniforme.
Os clipes são reproduzidos em um loop contínuo, sendo necessário avançar com os controles deslizantes para percorrer a playlist atribuída.
Independentemente da quantidade de clipes atribuídos à playlist, todos serão reproduzidos sem problemas dentro dos Reels. O reprodutor não aplicará a sugestão de três vídeos configurada na opção de pós-vídeo.
A função estará disponível inicialmente para a versão web e web responsiva.

Se tiver alguma dúvida, não hesite em nos escrever pelo chat. Ficaremos felizes em ajudar.

Atte. A Equipe da Mediastream