Skip to Content

What is blob in video src?

What is blob in video src?

The “blob” in a video src refers to a Binary Large OBject. Blobs are commonly used to store video, audio, and other multimedia files in web applications. When you see a “blob:” URL in a video source, it means the video file is stored as a blob in a database, rather than as a file on a server.

Why Use Blobs for Videos?

There are a few key reasons blobs can be useful for videos:

  • Blobs allow videos to be stored directly in a database – This avoids having to manage video files on a file system.
  • Blobs can simplify deployment – With videos in the database, there are no files to deploy between dev/staging/production.
  • Blobs work well with cloud services like AWS S3 – The video blobs can be stored in S3 buckets instead of a server filesystem.

Storing videos in blobs rather than files makes management easier in some cases. The tradeoff is that reading large blobs from a database can have performance implications vs reading from a file system. Caching and CDNs can help improve performance.

Blob URL Structure

A blob URL typically looks like this:

<video>
  <source src="blob:http://example.com/bb84a9fa-2da1-4851-a5b6-2e8a236e0a25">
</video>

Breaking it down:

  • blob: – Indicates this is a blob rather than a normal file path.
  • http://example.com/ – The origin domain. This matches the domain where the page is served from.
  • bb84a9fa-2da1-4851-a5b6-2e8a236e0a25 – A unique ID for the blob, usually a GUID.

When the browser sees this URL, it will request the blob data from the server based on the unique ID.

Storing Blobs in the Database

On the server side, blobs are usually stored as a Binary or Blob datatype in a database like SQL Server, MySQL, Postgres, etc. The unique blob ID seen in the URL maps to a record in the database.

Some common ways to store blobs:

  • SQL Server – VARBINARY(MAX) datatype
  • MySQL – LONGBLOB datatype
  • Postgres – BYTEA datatype

When storing blobs, you need to consider:

  • Maximum database size limits
  • Impacts on backup size
  • Memory usage of reading large values from the database

That’s why blobs are better suited for media files than large blocks of text or data. The size is more manageable.

Retrieving and Streaming Blobs to Clients

When the browser requests a blob URL, the server needs to:

  1. Look up the blob ID and fetch the data from the database
  2. Set the MIME content type in the response (e.g. video/mp4)
  3. Stream the blob data in chunks in the response body

This allows the video to be streamed to the client. Security is important when providing blobs – proper access controls should be added to prevent unauthorized blob access.

Some platforms like ASP.NET handle much of this automatically when using built-in blob storage APIs. But the general process is:

  • Lookup blob data based on ID
  • Set Content-Type header
  • Stream blob in response

Client-Side Rendering

On the client-side, the browser will receive the blob response and pass the data to the HTML video element. This will trigger the browser’s built-in video player to render the streaming video content.

No special handling is required to play blob videos – the browser treats it like any other video URL. Setting the proper MIME type on the server side ensures the browser can detect and render the video properly.

Use Cases for Blob Videos

Some examples of using blob URLs for videos:

  • Storing user-generated videos in a web app database
  • Serving video content for a web game as blobs
  • Admin CMS system where videos are uploaded/managed through a web interface

Blobs allow storing binary data directly in the main app database. This avoids a separate dedicated media server or CDN. But a DB-centric approach works better for smaller workloads rather than at enterprise scale.

Caching and Performance

As mentioned earlier, a downside of blob storage is reading large videos from a database can be slow compared to a file system. Performance optimization techniques include:

  • CDN Caching – Cache blob URLs at the CDN edge
  • Client-side Caching – Use cache headers to allow client caching
  • Persistent Caching – Keep frequently accessed blobs in memory

Testing different blob sizes and database storage engines is recommended to find optimal performance. The sweet spot will depend on the application and videos being stored.

Conclusions

The main takeaways on blob video src URLs:

  • Blobs allow storing videos in databases vs the filesystem
  • The URL contains an identifier that maps to a database record
  • Streaming requires looking up and returning the blob data
  • Browsers play blob videos just like a normal video file
  • Performance can be optimized via caching and CDNs

Blobs provide flexibility for video storage and serving approaches. But blobs come with potential performance tradeoffs to consider relative to file-based storage.