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

The express ratelimit message encountered an unanticipated token

I am currently implementing the express-rate-limit package to restrict requests made to my express API. My client-side is using Pug and everything seems to be functioning properly. However, whenever the rate limit is exceeded, I receive the expected POST: ...

javascriptnode.jsexpresspugrate-limiting

Updating ASP Update panel causes unexpected issues with jQuery star rating system

After incorporating an updatePanel into my ListView, I encountered a problem with my rating system. Upon initial page load, everything appears fine using the krajee-star rating library: https://i.sstatic.net/JmWI5.jpg However, during a partial-postback, ...

javascriptjqueryasp.netajaxupdatepanel

Javascript navigation menu failing to accurately display all pages

As I continue to enhance my website at , I have encountered an issue with the menu functionality. The menu is dynamically generated through JavaScript, scanning a folder for pages and populating them into an array. While this system functions smoothly ove ...

javascriptphpdebuggingmenuslideshow

Transitioning a JavaScriptIonicAngular 1 application to TypescriptIonic 2Angular 2 application

I am currently in the process of transitioning an App from JavaScript\Ionic\Angular1 to Typescript\Ionic2\Angular2 one file at a time. I have extensively researched various guides on migrating between these technologies, completed the A ...

javascripttypescriptionic-frameworkangularionic2

jQuery function to automatically close any other opened divs when a new div is opened

I have multiple elements that reveal a div when clicked. The issue is that if all elements are clicked, all divs open instead of just the one that was clicked. This is my jQuery code: <script> $(document).ready(function() { $('.servicemark ...

javascriptjqueryhtmlcss

Embed a variable into an HTML element without affecting the inner HTML content

I am trying to inject a specific string into an HTML tag <td anyElement="{{myString}}" >some random text here </td> My desired interpretation is as follows: <td anyElement='Some string'>some random text here </td> Howe ...

javascripthtmlangularjs

Encounter issue when using GAS withSuccessHandler function

I've developed a Google Sheets add-on that utilizes a modal dialog for the user interface. I encountered an issue with the success handler not running as expected, so I created a basic test interface to troubleshoot the problem. After the server-side ...

javascriptgoogle-apps-script

Guide on efficiently navigating a website: utilize selenium python to effortlessly hover the mouse over a sub menu and click on desired options

Seeking to automate a web application called "Maximo" using Selenium in Python, I've successfully managed to log in with credentials and click on buttons. However, I'm stumped on how to hover the mouse over a submenu and perform a click action. ...

javascriptpython-3.xselenium

Is there a way in WebStorm to create a "virtual" folder for conveniently organizing and hiding config files, or perhaps a feature that allows for easily toggling visibility of certain files?

I have a strong dislike for having all my configuration files cluttering up the root directory. These files are usually set up at the beginning of a project and rarely need to be changed. While I can hide them in WebStorm, it becomes a hassle to unhide the ...

javascriptnpmsublimetextwebstormweb-frontend

The function to refresh content is causing errors in the code

Creating a comment and replies form where the replies display underneath each comment. I've encountered an issue where I can post replies normally, but when attempting to delete a reply, I must refresh the page. After refreshing, I'm only able to ...

javascriptjqueryajax

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...& ...

javascripthtmlangulartypescriptprimeng

What is the reason for the reconnect function not activating when manually reconnecting in Socket.IO?

After disconnecting the client from the node server using socket.disconnect(true);, I manually re-establish the connection on the client side with socket.open(). The issue arises when triggering socket.open(); the socket.on('reconnect', (attempt ...

javascriptnode.jssocket.io

While developing an exam portal with Angular and Spring Boot, I encountered an issue when trying to incorporate a name field as [name]

Component.html <div class="bootstrap-wrapper" *ngIf="!isSubmit"> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!- ...

javascriptangulartypescript

Automatically Adjust Text Size to Fit Input Forms using jQuery

Does anyone know how to use jQuery to dynamically change the font size in a form input field so that it always remains visible and fits even as the user types more text? I want the font size to start at 13px and progressively shrink as the text reaches the ...

javascriptjqueryinput

Anticipate commitments during onbeforeunload

Is there a way to trigger a $http.get request when the page is closed? I encountered an issue where promises cannot be resolved because once the final method returns, the page is destroyed. The challenge lies in the fact that onbeforeunload does not wait ...

javascriptangularjssynchronizationangular-promiseonbeforeunload

What is the reason the 'Add' type does not meet the 'number' constraint?

I experimented with type gymnastics using Typescript, focusing on implementing mathematical operations with numeric literals. First, I created the BuildArray type: type BuildArray< Length extends number, Ele = unknown, Arr extends unknown ...

javascripttypescript

Get all the classes from the body element of the AJAX-loaded page and update the body classes on the current page with them

I am currently in the process of AJAX-ing a WordPress theme with a persistent music player. In Wordpress, dynamic classes are used on the <body> tag. The structure I'm working with looks like this: <html> <head> </head> ...

javascriptjqueryajaxwordpress

Using the let keyword from another component within the main React application: Helpful tips and tricks

I'm new to React and I want to be able to use the formIsValid state from one component in my main App.js file. When formIsValid is false, I want the DeliveryNote component to be visible, but when it changes to true, I want to hide the DeliveryNote com ...

javascriptreactjsframeworks

Looking for a comprehensive calculation that takes into account various input values?

I need to display the List Price at the bottom of the form so users are aware of the cost to list their item. Within a php file, I have defined price brackets. For example, if the listing price is £150.00, it falls between £100 and £199.99 and thus nee ...

javascriptphpajax

Using JavaScript to parse JSON response for sending status data through a POST request

I have successfully implemented a PHP code for file uploads. However, I am facing an issue retrieving the JSON response that indicates the upload status. Upon uploading a file via POST method, the response appears as follows: {"html_content":"<p>Fi ...

javascriptphpjqueryjsondropzone.js