A reel video is a short video, typically ranging from 15 to 60 seconds, that can be created and shared on social media platforms like Instagram, Facebook, and YouTube. Reels are usually vertical and designed to be engaging and entertaining.

Mediastream Platform is pleased to introduce this JavaScript solution that enhances the vertical video experience. Powered by AI, it provides personalized recommendations, content automation, and full compatibility with current monetization features.

Setup

In the following instructions, you will find a detailed guide to setting up this tool.

1. Playlist

To get started, categorize your clips in Platform and create a playlist. We recommend a Smart playlist, as it automatically updates content based on categories and tags, saving you time. If you need to display specific content, choose a manual playlist instead. Name the playlist to easily identify it within the reels flow. Make sure to assign the playlist to the same category as your videos.

2. Player

Go to Settings > Players and create a new video player. In the Design section, select the Reels type. Keep in mind that this player has a predefined design, including a button to toggle sound, navigation slides, and a timeline bar. However, you can apply custom CSS adjustments.

Next, go to the Post Video section. Enable the corresponding option and select the previously configured playlist. The number of items to display can be kept at the default value (3). Make sure to save the changes to apply the configuration.

Implementation

Once these initial steps are completed, it's time to configure the reels. To make this process easier, we provide a code example that you can use as a guide for your own implementation. Keep in mind that any modifications should be handled by your developer.

HTML

This HTML code structures the foundation for playing Reels. A button triggers the dynamic loading of videos into a designated container. Playback is handled using our integrated player and a JS control script, which will be shared below.

Example index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reels Example</title>
  <link rel="stylesheet" href="styles.css">
  
</head>
<body>
  <header class="header">
    <h1>Reels Example</h1>
    <button id="reels-button" class="button">Reels</button>
  </header>
  <div id="video-container" class="video-cards">
    <!-- The cards will be generated here dynamically. -->
  </div>

  <!-- Popup container -->
  <div id="overlay" class="overlay hidden">
    <div id="video-popup" class="video-popup">
      <!-- Dynamic content -->
    </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

This CSS styles the user interface for Reels playback, featuring a grid layout for video thumbnails from the playlist, a button to trigger playback, and an overlay to highlight the selected video. It defines a dark theme with visual effects and responsiveness for small screens. The styles in this example are configured to align with Mediastream's branding.

Example 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;
}

/* Cards */
.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;
}

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

/* Styles for Small Screens (Mobile) */
@media (max-width: 768px) {
  .video-popup {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border-radius: 0; /* Remove rounded borders to ensure full-screen utilization */
  }
}

JS

This JavaScript script enables the dynamic playback of Reels. It connects to the API using the initial video ID and the configured player ID to retrieve the necessary information. It also generates video cards with thumbnails and titles. When a card is clicked, it redirects the user to the player with the corresponding video ID. Additionally, a "Reels" button provides direct access to the initial video.

Example index.js

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

//INITIAL SETUP
var cantidad_display = 4; //Indicates the number of cards to display
var media_inicial = 'paste the media ID';
var reels_player = 'paste the player ID';
//COMPLETE THE INITIAL SETUP

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

// Function to Fetch Data from the 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 Fetching Videos:', error);
  }
}

// Function to Render Cards
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>
    `;

    // Add Click Event to Redirect to Player
    card.addEventListener('click', () => redirectToPlayer(video._id));

    container.appendChild(card);
  });
}

// Function to Redirect to the Player in a New Page redirectToPlayer(videoId) { window.location.href = `player.html?id=${videoId}`;
}

// Event for the "Reels" Button
reelsButton.addEventListener('click', () => {
  redirectToPlayer(media_inicial); // Redirigir al reproductor con un ID fijo
});

// Call the Function to Fetch and Render Videos
fetchVideos();

In these code variables, the goal is to adjust the number of visible videos in the initial container, allow any video from the playlist to be set as the initial one, and replace the player.

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

HTML Player

This HTML code dynamically loads the Mediastream player, retrieving the videoId from the URL. If valid, it initializes the player in #video-container; otherwise, it displays an error message.

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">
    <!-- The player will be injected dynamically here -->
  </div>

  <script>
    // Retrieve the video ID from the URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const videoId = urlParams.get('id'); // Retrieves the video "id"

    if (videoId) {
      const playerId = 'paste the player ID'
      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 valid video ID found.</p>';
    }
  </script>
</body>
</html>

The implementation will be deployed as follows according to the provided example:

When clicking on one of the videos or the Reels button, the page with our player will open. In the bottom right corner, slider controls will appear to navigate through the videos assigned to the playlist.

To keep in mind:

The player.html to which playback is redirected must contain the same default ID configured in the JS.
Horizontal format clips can be assigned; however, they will display black bars at the top and bottom.
It is recommended that all clips share at least one common video quality to ensure a smooth and consistent playback experience.
The clips play in a continuous loop, and it is necessary to use the slider controls to navigate through the assigned playlist.
Regardless of the number of clips assigned to the playlist, all will play seamlessly within the Reels. The player will not apply the three-video suggestion configured in the post-video option.
The feature will initially be available for the web and responsive web versions.

If you have any questions, feel free to reach out to us through the chat. We’ll be happy to help.

Atte. The Mediastream team