What are the numbers inside an Uint8Array? Blob

Question

Hello smarter people than me,

I don't know much about web development so I hope I will get some answers here. I was trying to download some basic m3u8 file to learn. Poorly all of the segments are 1x1p png files which last 10s in ts format.

So now the next step which I can think about is learning how the browser is reading these segments and display the desired video not just white pixels. So I looked up inside of the jwplayer 8 vanlong streaming code and found the following line:

Blob([new Uint8Array([0, 0, 0, 28, 102, 116, 121, 112, 105, 115, 111, 109, 0, 0, 2, 0, 105,...])], {type: "video/mp4"}))

I was then referring to set video objects source file to a blob url

I think I got the basics of how it works. Basically, there's a request which returns stuff in the blob format. This stuff is then converted to these numbers.

But now I am struggling. I don't know what these numbers are. Are they the contents of the mp4 file? Do they link to segments? Also If that's true I can't understand why they are in plain in my file and not loaded like in the question. Thanks for any help

//Edit I wrote some basic test code with the numbers

blob = new Blob([new Uint8Array([0, 0, 0, 28, 102, 116, 121, 112, 105, 115, 111, 109, 0,...])], {
   type: "video/mp4"
})
console.log(blob)
var url = URL.createObjectURL(blob);
document.getElementById('_video').src = url;

The Video is instantly over

Answer 1

Javascript represents binary data in a unconventional way. The Uint8Array that you see is a Binary Array Buffer that is used to store the binary data of the video file. In simple terms, these numbers are the raw binary data for the video.

What you are doing by new Blob([new Uint8Array([0, 0, 0, 28, ..])]) is creating a new Blob file from the raw binary data. The reason why your video file didn't ran was most probably because your binary data was not correct representation of a mp4 file.

Learn more about "Typed Arrays": https://javascript.info/arraybuffer-binary-arrays