HTML5: Play video from stored binary string

Question

I am trying to read the contents of a video file as a binary string using the FileReader.readAsBinaryString(Blob|File) as shown in the example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files and then store and play the video.

I tried it using the below (with a webm video file),but get a "Video format or MIME type not supported."

function readBlob (file, startByte, endByte, callback) {
                    console.log('readBlob():', file, startByte, endByte);

                    var reader = new FileReader();
                    reader.onloadend = function (evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            callback(evt.target.result);
                            var player = document.getElementById('player');
                            player.src = "data:video/webm;base64,"+evt.target.result;
                            player.load();
                            player.play();
                        }
                    }
                    var blob = file.slice(startByte, endByte);
                    reader.readAsBinaryString(blob);
                }

Does anyone know if it is possible to read a video file (one supported by the browser being used) as a binary string and play it in the browser HTML5 video player?

TIA

just curious, isn't base64 encoded video quite wasteful for bandwidth? — MartianMartian
– MartianMartian, Commented Apr 15, 2018 at 17:15

lostsource · Accepted Answer · 2013-04-27 10:50:32Z

9

Your problem might be with the player.src

player.src = "data:video/webm;base64,"+evt.target.result;

It is expecting the data to be in base64 but you're giving it a binary string.

Try encoding it to base64 using btoa

player.src = "data:video/webm;base64,"+btoa(evt.target.result);

answered Apr 27, 2013 at 10:50

lostsource

22k9 gold badges71 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lostsource Over a year ago

I believe so, at least according to en.wikipedia.org/wiki/Data_URI_scheme .. you might find this useful too iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri

Hakan Fıstık · Accepted Answer · 2017-11-28 11:37:49Z

3

How about FileReader.readAsDataURL(Blob|File) ?
It is explained in your html5rocks-link as well.

edited Nov 28, 2017 at 11:37

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Jun 16, 2013 at 7:59

sebilasse

4,6662 gold badges41 silver badges36 bronze badges

Collectives™ on Stack Overflow

HTML5: Play video from stored binary string

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related