Angular 4 set source for image or video on click

Question

i am trying to bind image or video/audio source when the popup modal displays, the data is coming from server, but the problem is, it is not working. i have even tried to access the element and set its value using @ViewChild but its keeps throwing error " navtiveElement " undefined.

here is my html code `

<form #ManageForm="ngForm" novalidate id="ManageForm" class="form-horizontal" >
                                    <app-modal #DetailsModal [CustomClassName]="DynamicClassName">
                                        <div class="app-modal-header">
                                            <button type="button" class="close" (click)="CloseModal()">&times;</button> 
                                             {{ DataName }}
                                        </div>
                                        <div class="app-modal-body">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-lg-8">
                                                        <img *ngIf="FileType == 'IMAGE'" src= {{ imgurl }}  class="imgpreview" />

                                                        <video class="video-js vjs-default-skin audio_preview" controls preload="auto" width="100%" height="100%" data-setup='{"example_option":true}' #audioplayer *ngIf="FileType == 'AUDIO'">
                                                        <source src="" type="audio/mp3" #audioplayersource/>
                                                        <p class="vjs-no-js"> text/message to display <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
                                                      </video>

                                                      <video class="video-js vjs-default-skin video_preview" controls preload="auto" width="100%" height="100%" data-setup='{"example_option":true}' #videoplayer *ngIf="FileType == 'VIDEO'">
                                                      <source src="" type="video/mp4" #videoplayersource/>
                                                      <p class="vjs-no-js">Some message<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                      </p>
                                                    </video>
                                                    </div>
                                                 </div>
                                            </div>
                                        </div>
                                    </app-modal>
                                </form>

`

Here is the component file:

  `
   // necessary imports 

 @ViewChild('audioplayer') public audioplayer;
    @ViewChild('audioplayersource') public audioplayersource;
    @ViewChild('videoplayer') public videoplayer;
    @ViewChild('videoplayersource') public videoplayersource;

MediaAsset(data : any){
    this.DynamicClassName = "modalWidthCustom";
    this.ids = data.id;
    this.DetailsModal.show();
    this.SignedUrl(this.ids);
  }

SignedUrl(id: number){
    const headers = new Headers({ 'Content-Type': 'application/json' });
    headers.append('Authorization', this.AuthenticationToken);
    // define vieo project url
    const APIURL = this.ENDPointURL + 'sourceFiles/' + id;
    this.http.get(APIURL, { headers: headers }).toPromise()
    .then((response: Response) => {
        var a = response.json();
        let SourceFile = a._links.sourceFile.href;
        let SignedPURL =  SourceFile + '/signedURL';
        let FileType = a.sourceFileType;
        this.http.get(SignedPURL,{headers : headers}).toPromise()
        .then((response: Response) => {
          let SignedUrl = response.json();

          let FinalURL;
          if(SignedUrl.status == 'OK'){
            FinalURL = SignedUrl.result.url;

              if(FileType == 'AUDIO'){

                 this.audioplayersource.nativeElement.setAttribute('src', FinalURL);
                 this.audioplayer.nativeElement.load();

              }else if(FileType == 'VIDEO'){
                 this.videoplayersource.nativeElement.setAttribute('src', FinalURL);
                 this.videoplayer.nativeElement.load();

              }else{
                this.Dataimgurl = "https://dummyimage.com/600x400/000/fff";
              }

          }
        })
    }).catch(e => {
      console.log(JSON.stringify(e));
    });
  }
    `

i get the values inside the variables but not able to set it in the source after the modal pop's up. please help me how can i set the src value.

Answer 1

I figured it out. I stored the Sourcelink into a variable and then passed that variable to the Source like this

 <source [src]="Sourcelink" type="audio/mp3" #audioplayersource/>

and then I used the lifecycle hook to load the video or audio like this

ngViewAfterInit() {
    if(FileType == 'AUDIO'){
      this.audioplayer.nativeElement.load();
    }
    if(FileType == 'VIDEO'){
     this.videoplayer.nativeElement.load();
   }
}

Answer 2

If you are using external URLs with Angular, be sure to use :

yourSrcBindVariable = this.sanitizer.bypassSecurityTrustResourceUrl('http://foo');

instead of

yourSrcBindVariable = 'http://foo';

More info on Angular DomSanitizer in Angular documentation

or in this related question.