CODEWITHSUNDEEP
angulartypescript
sanjihan
sanjihan

Reputation: 6014

getting video file from input and displaying it in Typescript

I am using this code to get my hands on an image that was just "uploaded" into browser using <input type="file"> and sending data to some component that uses it.

 fileReady(e) {
    let file: File = e[0];
    let image = new Image();
    let src: string;

    image.onload = function () {
      src = image.src;
      //do something with image

    }.bind(this);
    src = URL.createObjectURL(file);
    image.src = src;
  }

This work well for images. Next goal, is to make it work with videos too. There is unfortunately no Video() constructor and HTMLVideoElement also doesn't do the trick. How should I rewrite this code so that it can handle videos?

Upvotes: 0

Views: 3400

Answers (2)

Arun Gupta
Arun Gupta

Reputation: 163

Just to add a latest update in the answer, 

const blob = new Blob(arrayBuffer , {type: fileType });

will give error that the Blob needs an iterable. So the fix is :

const blob = new Blob([arrayBuffer], {type: fileType });

Upvotes: 1

Юра Панарин
Юра Панарин

Reputation: 849

Like this:

fileReady(e) {
      const file: File = e[0];
      const fileReader = new FileReader();
      fileReader.onloadend = (event: any) => {
        const arrayBuffer = event.target.result;
        const fileType = "video/mpeg";
        const blob = new Blob(arrayBuffer , {type: fileType });
        const src = URL.createObjectURL(blob);
        video.src = src;
      };
      fileReader.readAsArrayBuffer(file);
    }

Upvotes: 3

Related Questions