1

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

Huhngut
  • 402
  • 6
  • 13

1 Answers1

2

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

Apoorv Kansal
  • 106
  • 2
  • 4
  • First of all thanks for your very helpful and clear answer. It seems like the video is an empty placeholder. If I change any int in the array the browser tells me its no video. I will now search for the correct location where this placeholder is replaced. I wish I could like but these reputations :( – Huhngut Feb 13 '21 at 16:37
  • 1
    @Huhngut np man! I found a great talk at JSConf by David Flanagan https://youtu.be/4ba0G8FQt5M. Hope this helps. This a very old talk but I guess explains some basics – Apoorv Kansal Feb 13 '21 at 19:33