Home   web-development  

why we use blob urls in video source in html

Sometimes, you will see blob url as a source in video tag as shown below.

<video width="100%" height="100%" src="blob:https://www.primevideo.com/1f28fb9b-d061-41cd-9bbb-6995ac2b5ba4"></video>

Such <video> tag indicates that a video is being played from a blob URL. This blob URL is a unique identifier for a video resource that's being streamed or dynamically created by the browser.

Key Elements in the <video> Tag

<video width="100%" height="100%" src="blob:https://www.primevideo.com/1f28fb9b-d061-41cd-9bbb-6995ac2b5ba4"></video>

Understanding Blob URLs

Example Use Case

Here's a more detailed example of how a blob URL might be used in conjunction with a video element in a web application:

  1. Fetching the Video Data: The video data is fetched using an HTTP request.
  2. Creating a Blob URL: The fetched data is then converted into a blob URL.
  3. Assigning the Blob URL to the Video Tag: The blob URL is assigned to the src attribute of the <video> tag for playback.

Example JavaScript to Create a Blob URL for a Video

// Fetch the video data
fetch('https://example.com/video')
  .then(response => response.blob())
  .then(blob => {
    // Create a blob URL
    const blobUrl = URL.createObjectURL(blob);

    // Assign the blob URL to the video tag
    const videoElement = document.querySelector('video');
    videoElement.src = blobUrl;
  });

Why Use Blob URLs?

Published on: Jul 06, 2024, 06:51 AM  
 

Comments

Add your comment