Adding and deleting MPEG-DASH segments from a media source buffer in a dynamic manner

I have been developing a custom MPEG-DASH streaming player using the HTML5 video element. Essentially, I am setting up a MediaSource and attaching a SourceBuffer to it. After that, I am appending DASH fragments into this sourcebuffer and everything is functioning smoothly.

Now, my goal is to dynamically pre-fetch these segments based on the current time of the media element. However, in doing so, I have encountered numerous uncertainties that are not addressed in the MediaSource documentation.

  1. Is there a way to determine the maximum amount of data that a sourceBuffer can handle at once? If I were to append all the fragments of a very large video into the sourcebuffer, would it be able to accommodate them without issues or would it potentially slow down my browser?

  2. How can I calculate the number of fragments within a sourcebuffer?

  3. What is the method for determining the presentation time or end time of the last segment in the SourceBuffer?

  4. How do I selectively remove specific sets of fragments from the SourceBuffer and replace them with segments of different resolutions? (This is essential for enabling adaptive resolution switching during runtime.)

Thank you.

javascriptmedia-sourcempeg-dash

Answer №1

  1. There is a limit to the amount of buffered data, but developers do not have direct control over this according to the specification. Browsers handle removing unnecessary buffered data through algorithms like coded frame eviction. It's important for dash players to monitor the buffer and not download excessive data to prevent errors.

    In simpler terms: As long as the player considers the current buffered amount, there should be no issues with buffering all the stream too quickly.

  2. The Media Source Extensions (MSE) API processes a continuous stream of audio or video data without segment knowledge. While it's possible to map buffered time to segments using MPD timing data, a more reliable method is to track downloaded and fed segments separately.

  3. Check the buffered property for the end time of appended segments in seconds: videoElement.buffered.end(0)

    If "presentation time" refers to the last buffered frame's timestamp, parsing the stream is currently the only way to access this information.

  4. Use the remove method to clear buffered data.

    Implementing quality switching is straightforward despite limited details in the spec. Simply append the new quality's init header to the SourceBuffer before adding segments for that quality.

For learning purposes, the youtube dash mse test player is a valuable resource.

Answer №2

The capacity of a sourceBuffer to handle data is dependent on the MSE implementation and the browser vendor. Exceeding this limit will inevitably lead to errors.

While it's not possible to directly retrieve the number of segments in a SourceBuffer, you can monitor the actual buffered time. By factoring in the duration of segments, you can calculate this information.

If you're looking for comprehensive functionalities, I suggest exploring open-source DASH player projects like dashjs or ExoPlayer. Alternatively, consider utilizing a commercial solution such as bitdash.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with Bootstrap-slider.js functionality

I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

<html> <script type="text/javascript"> var map = null; jQuery(function($) { L.marker([50.065407, 19.945104], {title: 'Cat'}) .bindPopup('<h3>Cat</h3> ...

javascripthtmlregexjsoup

Troubleshooting: Why isn't my Ajax post functioning correctly with PHP variables?

After researching similar questions, I have discovered that in order to send a JavaScript value to a PHP variable, AJAX must be used. Here is what I have tried: function onCursorChanged(e, data) { $.post('familytree.php', {id: data.context.i ...

javascriptphpjqueryajaxvariables

How can I enable the "edit" function for a button within a list item?

I am currently working on a feature that allows users to edit list rows by clicking a button. However, I am facing an issue where the "edit" button only edits the first row instead of the matched line. This functionality is part of a program I am developi ...

javascripthtml

Javascript encountered an error upon attempting to return from the main function

I have a function that calls the database to perform an action: function callQuery(query) { db.query(query, (err, res) => { if (err) { // Error connecting to DB console.log(err.stack) } else { // Return the results ret ...

javascriptnode.jsexpress

Email notification will be sent upon form submission to Firestore

I'm currently designing a website for booking reservations through an HTML form, with data submission to firestore. Upon submission, a confirmation email is sent to the customer. Below is the code snippet I am using to achieve this: var firestore = fi ...

javascriptgoogle-cloud-firestore

What is the best way to extract an object from an array that only includes one element, and that element is an object?

Here is the output of my updated function: db.collection('SOCIAL').get().then((snapshot) =>{ snapshot.docs.forEach(doc => { tempData.push(doc.data()) }) return tempData }) I want to store these valu ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Move content off the screen using CSS3 translation

Throughout various projects, I have encountered the need to make elements on a webpage translate out of view (essentially making them fly out of the document). The idea was that by simply adding a class to the element, the CSS would take care of the animat ...

javascripthtmlcss

Can a props be retrieved and passed as an argument to a function?

My goal is to retrieve a prop from MapsStateToProps using react-redux's connect and then pass it to a child component. This prop serves as an argument for a function, which in turn returns something that becomes the state of the child component. Alth ...

javascriptreactjsreduxaxiosreducers

Vue.js does not have the ability to toggle a font-awesome icon

I am having trouble toggling a font awesome icon based on a boolean value. It seems that the font-awesome icon stays on the screen even after it is drawn: Check out this link for reference HTML: <script src="https://unpkg.com/vue"></script> ...

javascriptvue.jsfont-awesome

Converting a JavaScript function to CoffeeScript, accepting jQuery's .map function and Selectors as parameters

I'm in the process of converting some JavaScript code into CoffeeScript and encountering an issue with a particular function. Here is the original functioning JS: $(".comformt_QA").change(function(){ var array = $(".comformt_QA").map(function() { ...

javascriptjquerycoffeescript

What is the best way to restrict the size of a table that is filled with data from a database?

Currently using a combination of React, Node, Express, and Postgres to populate a table with data retrieved from Postgres. The issue arises when the table becomes overly long, prompting the need to display only 5 rows at once while adding a scroll bar for ...

javascripthtmlcssreactjspostgresql

Searching for a name in JSON or array data using jQuery can be accomplished by utilizing various methods and functions available

Having trouble searching data from an array in jQuery. When I input Wayfarer as the value for the src_keyword variable, it returns relevant data. PROBLEM The issue arises when I input Wayfarer Bag as the value for the src_keyword variable. It returns em ...

javascriptjqueryarraysregexpattern-matching

Creating a custom ID for a Firebase POST request

Is it possible to assign a custom ID in Firebase when using the POST method? For example: { "users": { "user_one": { "username": "jdoe", "password": "123" } } } I'm currently working on a Vue.js project and I want to save ...

javascriptfirebasefirebase-realtime-databasevue.js

Utilize the power of React and Framer Motion to create a visually stunning fade

After creating a preloader that appears when the variable "loading" is set to true, I now want the loader to fade out. This is an overview of my files: On the home page with all the content: return ( <> {loading ? ( ...

javascriptreactjsframer-motion

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

I'm currently attempting to make a popup message display when the document is fully loaded. Although I have successfully integrated Google Maps on another page, this task seems to be more challenging. Below is the code snippet: <html> < ...

javascriptjquerysmarty

NodeJs: Dealing with package vulnerabilities stemming from dependent npm packages - Tips for resolving the issue

Is there a way to address npm vulnerabilities that are dependent on another package? For instance, I'm encountering an error where the undici package relies on the prismix package. Things I have attempted: Executed npm audit fix Ensured Prismix is u ...

javascriptnode.jsnpmpackage.jsonnpm-vulnerabilities

Adjusting the color of a cell based on its value

Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...

javascripthtmljquerycss

Firebase and React are having trouble communicating because it is unable to access the properties of 'auth'

The issue with the 'Cannot read properties of undefined (reading 'auth')' error in login.js may be related to where it is coming from. Login.js: import { useContext, useState, useEffect } from "react"; import { Link, useNavigate } f ...

javascriptreactjsfirebase

What are the steps to recursively transform a JavaScript object?

I am currently working on recursively transforming a JavaScript object, but I have encountered an issue. The problem is: if any object key has exactly two properties - 'label' and 'value', then the value should change to the label only ...

javascriptjqueryreactjs