nickdesaulniers / netfix Goto Github PK

          And what to do with h264 files? MediaSource can eat it?

Originally posted by @vinnitu in #5 (comment)

[7:14pm] jya: a moov doesn't have to be found immediately after a ftyp ; as the spec states that any atoms not specifically mentioned in the spec are to be ignored. so if you have [ftyp][free][[moov] , it's still valid as [free] atom is to be ignored

Hi!

I am trying to implement an Audio-Player based on this example from https://github.com/nickdesaulniers/netfix in my Angular application.

However, I am struggling quite a bit to get things working. I'd have one question in particular: fetchRange() requests a particular chunk but how does that chunk have to look like in order for the MediaSource to digest it correctly?

So.. if we send start and end.. are we really talking about byte-offsets of the particular file I am currently playing? Because in this case my server-endpoint would just return a byte array that contains those selected bytes but without a file header.

Does it work like this?

Doesn't that mean that we have to call fetch(url, 0, segmentLength, callback) at first before we start streamin in order for MediaSource to be able to read in information such as sample rate etc.?

function fetchRange (url, start, end, cb) {
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.setRequestHeader('Range', 'bytes=' + start + '-' + end);
  xhr.onload = function () {
    console.log('fetched bytes: ', start, end);
    bytesFetched += end - start + 1;
    cb(xhr.response);
  };
  xhr.send();
};

Thank you for any help on this ..

I saw there was some code listening to the seek event, so i tried it, but:

Expected behaviour:
Jumping to a certain point loads the video at that point (if not already loaded) and continues playing/loading from there

Actual behaviour:
Video only plays if that point is already loaded. No subsequent parts are loaded. This also applies when seeking backwards.

I finally found a solution here in this repo to a problem that occupied me for several weeks (I wanted to play audio in chunks but also autosave the buffers for later offline usage).

I would kindly like to ask you to let me know, if there are any copyright related restrictions of further usage of the code.

Again, thanks a lot!

Hi @nickdesaulniers !

Your example at https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html is quoted on the MDN page at https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer#examples, which also links to this repo for the complete version. It's problematic for MDN maintainers for the example to live in a different repo, because we can't easily keep it in sync with the code in the page (and in fact they have already diverged quite a lot). See mdn/content#30423 for some recent context.

Ideally we would transfer the example to the mdn/dom-examples repo. Would you be OK with that? It means essentially putting this demo under a CC0 license, as that's what dom-examples uses.

Thank you!

Hi, I am really glad this example is around!

However, I'm having trouble getting videos other than frag_bunny.mp4 to play. I fragment my video like so:

mp4fragment --verbosity 3 ecm-presenter-640x360.mp4 ecm-presenter-bento.mp4

And when I check it out with Bento's mp4dump, it looks OK. However, when I get the codec string from mp4info, I end up with a MIME codec like this:

video/mp4; codecs="avc1.42C01E, mp4a.40.2"

While the one in the example is:

video/mp4; codecs="avc1.42E01E, mp4a.40.2"

I'd think that would be OK as long as I updated it in the code, but on Firefox, MediaSource.isTypeSupported says that it is not supported. On Chrome, it says it does, but then it crashes the renderer process when it tries to play. (The frag_bunny.mp4 does play on Chrome.)

It looks like that bit field (C0 in frag_bunny.mp4 and E0 in my video) is profile compatibility. The thing is, I have no idea how to encode either in Bento or ffmpeg in such a way that that value is set to C0. I was hoping you might.

Hello Nick!
My name is John Giannoudakis, and i am a software engineer from Greece.
I recently noticed the MediaSource API and thought that this would help me to manually buffer an mp4 video for a mobile ad format i am developing.

I read your article here https://hacks.mozilla.org/2015/07/streaming-media-on-demand-with-media-source-extensions/ and found it very intersting and well writen. Really Good job! Bravo :)

However i can't figure out how to covert my simple mp4 to a fragmented one to play with MSE. I don't want to do DASH so i don't want the MPD manifest file. i use ffmpeg to fragment the mp4 using

ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4

but the mp4 file has no duration and when i used it with the code you have in your bunny demo it doesn't work.

Can you please me help me about the process i have to do to create a proper mp4 file for MSE?

Thanks in advance for your time and help
John

Very nice code, thank you!

When using the "buffer when needed" version, Chrome will only load size/totalSegments on the first request. That's nice, but now it will not show the length of the video nor can I seek forward/backward into the video.

Any help?
Regards, Chris