How to retrieve Video from azure and display on browser using angular

You can try the following steps to display the video from Azure Blob Storage in an Angular application:

1. Install the `@angular/platform-browser` package to use the `DomSanitizer` service for sanitizing URLs:

   ```
   npm install @angular/platform-browser
   ```

2. Import the `DomSanitizer` service in your component and inject it in the constructor:

   ```typescript
   import { Component } from '@angular/core';
   import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
   
   @Component({
     selector: 'app-video-player',
     template: `
       
     `
   })
   export class VideoPlayerComponent {
     videoUrl: SafeUrl;
     
     constructor(private sanitizer: DomSanitizer) {}
   }
   ```

3. Fetch the video file from Azure Blob Storage in your Angular service using the `HttpClient`:

   ```typescript
   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class VideoService {
     private baseUrl = 'https://youraccount.blob.core.windows.net/yourcontainer';
     
     constructor(private http: HttpClient) {}
     
     getVideoUrl(videoName: string): Observable {
       const url = `${this.baseUrl}/${videoName}`;
       return this.http.get(url, { responseType: 'blob' });
     }
   }
   ```

4. In your component, call the `getVideoUrl` method of the service and use the `DomSanitizer` to sanitize the blob URL:

   ```typescript
   import { Component } from '@angular/core';
   import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
   import { VideoService } from './video.service';
   
   @Component({
     selector: 'app-video-player',
     template: `
       
     `
   })
   export class VideoPlayerComponent {
     videoUrl: SafeUrl;
     
     constructor(
       private videoService: VideoService,
       private sanitizer: DomSanitizer
     ) {
       this.videoService.getVideoUrl('example.mp4').subscribe(blob => {
         const objectUrl = URL.createObjectURL(blob);
         this.videoUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
       });
     }
   }
   ```

5. Add the `VideoPlayerComponent` to your module declarations and use it in your templates:

   ```typescript
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HttpClientModule } from '@angular/common/http';
   import { VideoPlayerComponent } from './video-player.component';
   
   @NgModule({
     declarations: [VideoPlayerComponent],
     imports: [BrowserModule, HttpClientModule],
     bootstrap: [VideoPlayerComponent]
   })
   export class AppModule {}
   ```

Make sure to replace `youraccount` and `yourcontainer` with your Azure Blob Storage account and container names, and `example.mp4` with the name of your video file. Also, make sure that the CORS settings for your Azure Blob Storage account allow requests from your Angular application's domain.