Merge branch 'main' into mediastore-how-abr-works

docs/mediastore/core-concepts/abr-ladder.md

@@ -17,3 +17,79 @@ keywords:
   - zero buffer rate
   - zbr
 ---
+
+# What is an ABR Ladder?
+
+An **ABR (Adaptive Bitrate) ladder** is a collection of progressively higher quality video streams that a media player can switch between based on a player's network conditions. These streams are encoded at different *bitrates* and *resolutions*, and the player selects the best quality in real-time for the best possible viewing experience. The goal of an ABR ladder is to maximize video quality while minimizing buffering, which can occur due to fluctuating network bandwidth.
+
+## Role of the ABR Ladder in media streaming
+
+<div style={{ display: "flex", alignItems: 'flex-start', flexWrap: 'wrap' }}>
+  <div style={{ flex: '2' }}>
+The ABR ladder enables [adaptive bitrate streaming](/mediastore/performance/adaptive-bitrates/how-it-works), where the video player dynamically adjusts the quality of the stream based on network performance. If bandwidth is high, the player selects a higher-quality stream (higher resolution and bitrate). If bandwidth drops, the player switches to a lower-quality stream, preventing interruptions in playback. This adaptability contributes to [zero buffer rate](/mediastore/core-concepts/zero-buffer-rate), the pinnacle metric of viewer experience.
+
+
+### Bitrate and resolution
+
+- **Bitrate** - The amount of data used per second of video, usually measured in **kilobits per second (kbps)** or **megabits per second (Mbps)**. Higher bitrates deliver more data per second, resulting in higher visual quality. However, higher bitrates also require more bandwidth to stream, and if the network is slow, the player may need to switch to a lower-bitrate stream to prevent buffering.
+
+
+</div>
+ <div className="hideOnMobile" style={{ flex: '1', paddingLeft: '20px' }}>
+  <img src="/img/mediastore/mo-ladder.png" alt="Mo climbing ladder" style={{ width: '80%' }} />
+  </div>
+</div>
+
+- **Resolution**: The **number of pixels** that make up the video image, which directly correlates to the clarity and sharpness of the video. Common resolutions include **1080p** (1920x1080 pixels), **720p** (1280x720 pixels), and **480p** (854x480 pixels). Higher resolutions provide more detail and better image quality, but they also require more bandwidth and higher bitrates to maintain that quality.
+
+
+### Progressive rungs of the ABR ladder
+
+An ABR ladder consists of several **rungs**, each representing a different combination of bitrate and resolution, for example:
+
+<table className="customTable">
+  <thead>
+    <tr>
+      <th>Resolution</th>
+      <th>Bitrate</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>4K (2160p)</td>
+      <td>30-45mbps</td>
+      <td>Ultra-high resolution for 4K-capable devices and fast connections</td>
+    </tr>
+    <tr>
+      <td>1080p</td>
+      <td>8mbps</td>
+      <td>High definition for most standard devices, offering a balance of quality and data usage</td>
+    </tr>
+    <tr>
+      <td>720p</td>
+      <td>5mbps</td>
+      <td>Moderate resolution and bitrate, suitable for slower connections while maintaining decent video quality</td>
+    </tr>
+    <tr>
+      <td>480p</td>
+      <td>2.5mbps</td>
+      <td>Lower resolution for acceptable quality on limited bandwidth connections</td>
+    </tr>
+    <tr>
+      <td>360p</td>
+      <td>1mbps</td>
+      <td>Low resolution and bitrate, typically used when bandwidth is severely constrained</td>
+    </tr>
+  </tbody>
+</table>
+
+This structure ensures that the player can always deliver video content in the best available quality given the player's current network conditions and device capabilities.
+
+## Momento Mediastore keeps you at the highest rungs possible
+
+Momento’s in-memory, two-tier architecture is optimized for **low-latency delivery**, significantly improving the performance of streaming workflows that use an ABR ladder. By reducing origin latency, Momento delivers segments with unbeatable reliability and performance, allowing video players to stay on the highest-quality rungs for the longest amount of time possible.
+
+In contrast, a slow origin can cause **timeouts** at CDN points of presence (POPs), which may result in buffering in downstream video players as they struggle to handle the delayed or missing data. Momento mitigates these risks by providing low-latency, in-memory access to [segments](/mediastore/core-concepts/segments), ensuring that content is delivered smoothly and without delays.
+
+By reducing origin latency, Momento not only prevents timeouts but also helps CDNs maintain a **consistent flow of data**, enabling higher-quality, uninterrupted playback and [zero buffer rates](/mediastore/core-concepts/zero-buffer-rate).

docs/mediastore/core-concepts/zero-buffer-rate.md

@@ -14,3 +14,29 @@ keywords:
   - elemental
   - serverless
 ---
+
+# What is zero buffer rate?
+
+Zero buffer rate (ZBR) measures the percentage of viewers who can watch an entire stream without encountering a single buffering event. A high ZBR indicates a smooth, uninterrupted streaming experience, which is essential for maintaining viewer satisfaction and engagement. Buffering interruptions can be frustrating and cause viewers to leave a stream, so achieving a high ZBR is a critical goal for any streaming service.
+
+<div style={{display: 'flex', justifyContent: 'center'}}>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/xSWRpr2we6Y?si=u4TtsVlEQtm44cvQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>
+
+## ZBR in media streaming
+
+To maintain a high ZBR, it is critical that [segments](/mediastore/core-concepts/segments) are delivered quickly and consistently. The video player relies on receiving video segments ahead of time to build a *look-ahead buffer*, which prevents playback interruptions. If the player runs out of content in the look-ahead buffer due to delays in segment retrieval, it will be forced to pause and buffer, reducing the ZBR.
+
+### Factors that affect ZBR
+
+- **Network conditions** - Fluctuating bandwidth on cellular or Wi-Fi networks can prevent the player from maintaining a steady look-ahead buffer
+- **CDN performance** - Points of presence (POPs) try to collapse requests to reduce the load on the origin, but they can still experience delays or bottlenecks if the origin is experiencing issues
+- **Origin latency**: A slow [origin](/mediastore/core-concepts/origin) introduces additional delays like failed writes or slow reads
+
+## How Momento maximizes ZBR
+
+Momento improves ZBR with its **in-memory architecture** and **low tail latencies**. As a fast, reliable origin, Momento ensures that video segments are delivered quickly, reducing the risk of buffering. The platform's finely tuned architecture minimizes segment delivery times, allowing players to maintain a full look-ahead buffer, which is critical for uninterrupted playback.
+
+In addition to low-latency delivery, Momento's architecture helps reduce error rates, lowering the chances of failed writes or retries that could delay segment delivery. Through fewer errors and faster data transfer, Momento significantly improves ZBR. With tail latencies that are 100 times faster than traditional object stores Momento MediaStore provides smooth and consistent streaming for all viewers, even during high-demand situations.
+
+A slow origin can introduce bottlenecks, causing players to buffer while they wait for new segments to load, ultimately reducing ZBR. With Momento, these risks are minimized, providing a seamless, buffer-free viewing experience that keeps viewers engaged.

src/css/custom.scss

@@ -137,6 +137,10 @@ code span {
   .ask-mo-button {
     visibility: hidden;
   }
+
+  .hideOnMobile {
+    display: none;
+  }
 }
 
 .markdown p {