Retrieving a video file from the input and showcasing it using Typescript

Question

Retrieving a video file from the input and showcasing it using Typescript

Currently, I have implemented this code in order to retrieve an image that has been "uploaded" into the browser using the <input type="file"> tag, and then sending the data to a component that will utilize 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;
  }

While this method works perfectly for images, my next objective is to extend its capability to handle videos as well. Currently, neither the Video() constructor nor the HTMLVideoElement seem to achieve this goal. How can I adjust this code to accommodate videos?

angular typescript

Answer 1

Answer №1

Here is an example:

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

Answer 2

Here is an example:

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

Answer 3

Answer №2

Adding on to the most recent update in the solution:

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

An error is thrown stating that the Blob requires an iterable input. The resolution is as follows:

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

Answer 4

Adding on to the most recent update in the solution:

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

An error is thrown stating that the Blob requires an iterable input. The resolution is as follows:

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

Retrieving a video file from the input and showcasing it using Typescript

Answer №1

Answer №2

Similar questions

Passing parameters to an Angular CLI ejected app

Implementing queuing functionality in Angular's HttpClient

Converting JSONSchema into TypeScript: Creating a structure with key-value pairs of strings

Can you provide the syntax for a generic type parameter placed in front of a function type declaration?

Filter array to only include the most recent items with unique names (javascript)

The 'Access-Control-Allow-Origin' header can be found on the resource that was requested

Ensure to pass the correct type to the useState function

Angular - Automatically update array list once a new object is added

The pre-line white-space property is not functioning as anticipated in my CSS code

Guide to Making a Basic TypeScript Metadata Tag in Your Code

What are the reasons for being unable to utilize display flex within Angular?

Iterating through an array and setting variables according to asynchronous code

Is there a method to categorize an array of objects by a specific key and generate a new array of objects based on the grouping in JavaScript?

By implementing a custom function within the router's "redirectTo" method, we can dynamically determine the destination for redirection, effectively avoiding Ahead-of-Time (A

Implementing a default child route in Nativescript

Is it possible to use TypeScript in a React Native project with a JavaScript file?

What led the Typescript Team to decide against making === the default option?

Step-by-step guide to designing a leaflet map using Angular Formly

An Unexpected ER_BAD_FIELD_ERROR in Loopback 4

What is the best way to implement Angular translation for multiple values in a typescript file, while also incorporating parameters?