What is the process of playing blob videos (avi, mov) in Angular14?

I've been struggling with this issue for quite some time without knowing how to resolve it.

After some research, I came across a similar question: how to play blob video in angular. However, the problem is that the demo provided in the answer does not support "avi" and "mov" formats. Even though I am using the latest version of Chrome, it doesn't display the selected video for me.

In my HTML template file:

<input type="file" accept="video/*" (change)="onSelectedFile($event)">

<video 
  *ngIf="prev_url" 
  [src]="prev_url" 
  style="width:300px; height:300px;" 
  controls></video>

In my TS file:

export class AppComponent  {
  prev_url : any;

  constructor(
    private sanitizer : DomSanitizer
  ) {}

  onSelectedFile(ev) {
    let file = ev.target.files[0];
    var URL = window.URL;
    this.prev_url = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
    console.log(this.prev_url)
  }
}

You can check out a working sample here.

P.S. I also attempted to use a "vg-player", but unfortunately, it didn't work as expected.

angulartypescriptgoogle-chromeangular14avi

Answer №1

class HomeComponent {
  image: SafeUrl;

  constructor(private sanitizer: DomSanitizer) {}

  onImageSelected(event) {
    let selectedFile = event.target.files[0];
    var URL = window.URL;
    this.image = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(selectedFile));
    console.log(this.image);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

My NextJs app has a products page that should render dynamic routes statically using generateStaticParams(). However, this functionality does not work as expected. When I run "npm run build," it only generates 3 static pages instead of the expected number. ...

javascripthtmlreactjstypescriptnext.js

Service consumption across various components is failing to function as intended

I'm working on implementing a side navigation bar and content div. The goal is to display the innerText of the selected navigation item in the content div whenever an element in the side nav is clicked. Below is my current code setup: sidenav.compone ...

angularangular-servicessubject-observer

Best Practices for Utilizing NPM Modules with TypeScript

I am interested in developing an npm module using TypeScript. Can anyone suggest a best practice guide on how to start? Here are my questions: Node.js does not natively support TypeScript, so what is the recommended way to publish an npm module? Shoul ...

javascriptnode.jstypescriptnpmtypescript1.8

Struggling to assign the correct data type to a property in Typescript

I am encountering a TypeScript error with the following code. In this interface, the 'items' property can be either an object or an array depending on the code and response. I am unsure how to specify the datatype of 'array/object/any', ...

typescript

The service remains operational while the button's status undergoes a change

In my data table, each row has a column containing buttons. To ensure that only the button in the clicked row is executed, I include the index of that row in the start/pause timer function. I decided to create these functions in a service so that the time ...

angulartypescript

Managing data from devices by using Ionic v2 along with the BLE Central plugin

Currently experiencing some difficulties when it comes to managing the device data of discovered peripherals. I am searching for some guidance on this matter. I can successfully scan for devices and my "success" callback functions without any issues. My g ...

angularjscordovaangularionic-frameworkbluetooth-lowenergy

Unresolved promise: Issue encountered with StaticInjectorError within AppModule linking to HttpHeaders:

I am currently working on an ionic v3 project and facing a particular issue. The problem is similar to #47492475, even though I have already imported HttpClientModule in app.module.ts. Despite this import, the error continues to persist. Below are my .ts f ...

angularionic-frameworkionic3

Switching from MOCK API to real API in Angular: The step-by-step guide

I am a beginner in Angular and I am currently working on connecting a sample app to my API gateway called ContactApp. Right now, it is functioning with a mock API but I want to switch to using a real API server. I followed all the steps from a tutorial on ...

reactjsangularamazon-dynamodb

Invoke the submit function of a form located outside a Material UI dialog from within the dialog

I'm facing an issue with a nested form scenario. The <form/> inside another form is displayed as a Material UI dialog and rendered in a separate portal in the DOM. /* SPDX-FileCopyrightText: 2021 @koistya */ /* SPDX-License-Identifier: MIT */ i ...

reactjstypescriptmaterial-ui

NGXS State Mutation Event

In my NGXS store, I have an object called obj = { name: 'so-and-so', age: 42, nationality: 'country-name', address: { ... } }. It is essential that whenever any of the properties, including nested ones like 'address', are upda ...

angularrxjsngxs

Issue encountered while attempting to enclose a function within another function in Typescript

I'm attempting to wrap a function within another function before passing it to a library for later execution. However, I'm encountering various Typescript errors while trying to utilize .apply() and spread arguments. The library mandates that I ...

reactjstypescript

How come Typescript allows me to generate intersection types that seem impossible?

Despite being unimplementable, the type definition below does not trigger any warnings from the compiler. // No type error type impossible = 0 & string[] & 'anything' An item cannot simultaneously be a number, a string[], and a stri ...

typescripttypes

Error in validating control groups in Angular 4

I'm currently working on setting up a standard form using Angular reactive forms. Below is the generic HTML code I have for input elements: <div class="form-input form-group" [formGroup]="group"> <div class="row"> <div clas ...

angularangular-reactive-forms

Compiling Vue with TypeScript: Troubleshooting common errors

Using Vue Components with Templates Multiple Times in TypeScript I am working on utilizing a component with a template multiple times within another component. The code is split between a .html file and a .ts file. The .html file structure is as follows: ...

typescriptvue.jsvue-component

Utilizing Angular 16 to Link Component Input with Parent Route Parameter

Picture a scenario where there is a component (some.component.ts) in Angular 16 that retrieves the value for its foo property from activeRoute, specifically from the parent route. Take a look at the code snippet below: @Input() foo!: string; constructor(p ...

angulartypescriptroutes

Luxon DateTime TS Error: The 'DateTime' namespace cannot be used as a type in this context

I have encountered an issue while trying to set the type of a luxon 'DateTime' object in TypeScript. The error message DateTime: Cannot use namespace 'DateTime' as a type appears every time I attempt to assign DateTime as a type. Below ...

javascriptreactjstypescriptluxon

Unlock the power of Angular by learning how to access HTML elements using @ViewChild

Within the code, there is a component with HTML: <div class="filter" #filterContainer> In another component, I am listening to the body scroll events and attempting to apply scrollTop to the element #filterContainer: export class SkeletonComponen ...

angularangular8

Update the component to display the latest information from the Bryntum grid table

In the Vue component, I have integrated a Bryntum grid table along with a bar chart. Clicking on one of the bars in the chart should update the data displayed in the Bryntum grid table. However, I've encountered difficulty in reloading the entire Bryn ...

typescriptvue.jsvue-componentbryntum-grid

Theming for Atom and Electron developer tools

After switching from the netbeans IDE to github's atom, I realized that some necessary features were missing. Unable to find a suitable package, I decided to try customizing it myself, gaining valuable insight into the editor in the process. However, ...

cssgoogle-chromeelectronatom-editor

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11