Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can support blob? #77

Open
harisnaeemofficial opened this issue Jul 13, 2020 · 3 comments
Open

can support blob? #77

harisnaeemofficial opened this issue Jul 13, 2020 · 3 comments

Comments

@harisnaeemofficial
Copy link

Can this player support blob url to play private (mp4 or webm) videos ?
can you add this function in this please ?

@matvp91
Copy link
Owner

matvp91 commented Jul 14, 2020

There's no API that does blob yet, but it shouldn't be too hard to introduce a mediasource streamtype.

Just to be clear, are you talking about creating a MediaSource object and have the object URL be assigned to the video src property?

@harisnaeemofficial
Copy link
Author

Yes exactly like MediaSource
I found this solution on Mozilla MediaSource web API

var video = document.querySelector('video');

var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource();
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}

function sourceOpen () {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (
) {
mediaSource.endOfStream();
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};

function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};

But it uses some specific codec formats which are not supported by some mp4 videos. Can you check this and add this in media player so that it automatically checks each codec format for the given video and then show the blob URL in the video src property? Or can we add this option without a specific codec format of the video?
Because if I used one mp4 video for my website maybe the other video format will be WebM which have a different codec format.

@harisnaeemofficial
Copy link
Author

This MediaSource API works perfectly for this "frag_bunny.mp4" video. I have tried to use other videos but its getting error on every video. Means mostly downloaded videos don't have the same audio and video codec format like this one "avc1.42E01E, mp4a.40.2"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants