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 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

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./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

• javascript
• html
• html5-video

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

2 Answers 2

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);

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