YouTip
Home
JavaScript
PHP
Python3
HTML
C#
Python
Java
PyTorch
Linux
C
jQuery
CSS
XML
jQuery UI
Bootstrap
C++
Angular
HTML DOM
Redis
Web Building
Home
>
HTML
>
Av Prop Buffered
Av Prop Buffered
📅 2026-06-14 | 📂 HTML
## HTML Audio/Video DOM: `buffered` Property The `buffered` property is a read-only property of HTML `
` and `
` elements. It returns a `TimeRanges` object, which represents the portions of the media resource that have been downloaded and cached (buffered) by the browser. Because media files are often streamed or downloaded progressively, the browser may buffer multiple non-contiguous segments of a video or audio file—especially if the user skips forward or backward in the timeline. The `buffered` property allows developers to track these buffered segments in real time. --- ## Syntax ```javascript let timeRanges = mediaElement.buffered; ``` ### Return Value The property returns a **`TimeRanges`** object. This object contains the following properties and methods: | Property / Method | Return Type | Description | | :--- | :--- | :--- | | `length` | `Number` | Returns the total number of buffered time ranges (segments). | | `start(index)` | `Number` | Returns the start time (in seconds) of the buffered range at the specified index. | | `end(index)` | `Number` | Returns the end time (in seconds) of the buffered range at the specified index. | > **Note:** The index for the buffered ranges is zero-based. The first buffered range is accessed at index `0`. --- ## Code Examples ### Example 1: Basic Usage The following example retrieves the start and end times of the very first buffered segment of a video. ```javascript // Select the video element const myVideo = document.getElementById("video1"); // Check if there is at least one buffered range if (myVideo.buffered.length > 0) { const startSeconds = myVideo.buffered.start(0); // Start of the first range const endSeconds = myVideo.buffered.end(0); // End of the first range console.log(`First buffered segment: Start = ${startSeconds}s, End = ${endSeconds}s`); } else { console.log("No media has been buffered yet."); } ``` ### Example 2: Tracking All Buffered Segments If a user skips around a video, the browser might buffer multiple disconnected segments. You can loop through the `TimeRanges` object to see all buffered parts: ```javascript const myVideo = document.getElementById("video1"); // Listen for the 'progress' event to monitor buffering updates myVideo.addEventListener("progress", () => { const bufferedRanges = myVideo.buffered; console.log(`Total buffered segments: ${bufferedRanges.length}`); for (let i = 0; i < bufferedRanges.length; i++) { const start = bufferedRanges.start(i); const end = bufferedRanges.end(i); console.log(`Segment [${i}]: ${start.toFixed(2)}s to ${end.toFixed(2)}s`); } }); ``` ### Example 3: Calculating Buffer Percentage You can use the `buffered` property to calculate what percentage of the total video duration has been buffered. ```javascript const myVideo = document.getElementById("video1"); myVideo.addEventListener("progress", () => { if (myVideo.duration > 0 && myVideo.buffered.length > 0) { // Get the end time of the last buffered range const lastBufferedIndex = myVideo.buffered.length - 1; const bufferedEnd = myVideo.buffered.end(lastBufferedIndex); // Calculate percentage const percentBuffered = (bufferedEnd / myVideo.duration) * 100; console.log(`Buffered: ${percentBuffered.toFixed(1)}%`); } }); ``` --- ## Technical Considerations ### 1. Multiple Buffered Ranges When a user clicks ahead on the timeline (seeking), the browser stops downloading the current segment and starts downloading from the new timestamp. This creates a gap, resulting in multiple buffered ranges (i.e., `buffered.length` will be greater than `1`). ### 2. The `progress` Event To monitor buffering progress dynamically, always bind your logic to the HTML5 media **`progress`** event. This event fires periodically as the browser downloads more media data. ### 3. Error Prevention Always check if `buffered.length > 0` before calling `buffered.start(index)` or `buffered.end(index)`. If you attempt to access an index that does not exist (e.g., calling `start(0)` when nothing is buffered yet), the browser will throw an `IndexSizeError` DOM exception. --- ## Browser Compatibility | Chrome | Edge / IE | Firefox | Safari | Opera | | :---: | :---: | :---: | :---: | :---: | | Yes | Edge (All) / IE 9+ | Yes | Yes | Yes | *Note: Internet Explorer 8 and earlier versions do not support the `buffered` property or HTML5 audio/video elements.*
← Av Prop Controller
Av Prop Autoplay →
📂 Categories
⚡ JavaScript
(1589)
🐘 PHP
(872)
🐍 Python3
(810)
🌐 HTML
(691)
⚙️ C#
(650)
🐍 Python
(594)
☕ Java
(552)
⚙️ PyTorch
(534)
🐧 Linux
(472)
⚙️ C
(432)
📦 jQuery
(406)
🎨 CSS
(377)
📄 XML
(259)
📦 jQuery UI
(231)
🎯 Bootstrap
(220)
⚙️ C++
(215)
🅰️ Angular
(205)
🌐 HTML DOM
(201)
🔴 Redis
(188)
📖 Web Building
(142)
💚 Vue.js
(141)
📈 R
(131)
🐼 Pandas
(124)
🗄️ SQL
(105)
⚙️ Docker
(86)
⚙️ TypeScript
(73)
⚙️ Highcharts
(70)
📖 AI Agent
(70)
⚙️ React
(68)
📖 Node.js
(65)
⚙️ Machine Learning
(60)
📁 Git
(59)
🔵 Go
(58)
📈 Markdown
(58)
🔢 NumPy
(55)
🧪 Flask
(54)
⚙️ Scala
(53)
🗄️ SQLite
(52)
📖 JSTL
(52)
⚙️ VS Code
(51)
🍃 MongoDB
(49)
📈 Perl
(48)
📈 Ruby
(47)
📊 Matplotlib
(47)
⚙️ Uncategorized
(46)
🍎 Swift
(46)
🗄️ PostgreSQL
(46)
⚙️ Data Structures
(46)
📈 Playwright
(46)
📖 iOS
(45)
🗄️ MySQL
(44)
⚙️ LangChain
(43)
📖 FastAPI
(40)
⚙️ Ionic
(38)
📈 Design Patterns
(37)
⚙️ Eclipse
(37)
🎨 CSS3
(34)
🌙 Lua
(34)
⚙️ Codex
(34)
🎸 Django
(32)
⚙️ OpenCV
(32)
📈 Rust
(31)
📖 JSP
(31)
⚙️ Claude Code
(31)
📖 Pillow
(30)
⚙️ OpenCode
(28)
📖 AI Skills
(27)
📈 Flutter
(26)
📖 Maven
(26)
🎨 Tailwind CSS
(25)
🧠 TensorFlow
(25)
📈 Servlet
(24)
📈 Dart
(23)
📖 Assembly
(23)
⚙️ Memcached
(22)
✏️ SVG
(22)
⚙️ Electron
(22)
📖 NLP
(22)
🔍 Regex
(21)
📈 Android
(20)
🟣 Kotlin
(19)
📖 Julia
(19)
📖 SOAP
(17)
📖 Selenium
(17)
📈 PowerShell
(17)
💅 Sass
(16)
📖 HTTP
(16)
📖 Zig
(15)
📖 AI
(15)
🔄 AJAX
(14)
📈 Swagger
(14)
⚙️ Scikit-learn
(13)
⚙️ ECharts
(13)
⚙️ Chart.js
(13)
⚙️ Cursor
(13)
⚙️ SciPy
(12)
📈 RDF
(12)
📖 Ollama
(12)
📖 Next.js
(12)
📖 Plotly Dash
(12)
📋 JSON
(11)
📈 RESTful API
(11)
📖 WSDL
(9)
⚙️ CMake
(8)
📈 Firebug
(7)
📖 Nginx
(6)
☸️ Kubernetes
(6)
📈 Jupyter
(6)
📖 LaTeX
(4)
📖 UniApp
(4)
🗄️ SQL Server
(1)
YouTip