Updating a <video> 's src dynamically doesn't change video

user_4939530 0
Viewed 489

I have an array of attachments, and I have a function that navigates through them and displays/plays the video based on its source URL. I have the URL updating correctly, but the actual video output on the site doesn't change.

Here's a minimal example HTML:

<ng-container *ngIf="isVideo; then videoFile; else notVideoFile"></ng-container>

<ng-template #videoFile>
  <video controls autoplay>
    <source [src]="currentAttachment.url"/>
  </video>
</ng-template>

I know for sure the URL updates because when I print it {{ currentAttachment.url }}, it's fine. The URL updates but the actual video doesn't.

angular html
3 Answers

I found the solution. When iterating through my attachments array I added the following code to update the src:

    if (this.isVideo) {
      if (this.videoFileContainer) {
        this.videoFileContainer.nativeElement.load();
        this.videoFileContainer.nativeElement.play()
      }
    }

and added the viewchild:

@ViewChild('videoFileContainer', { static: false }) videoFileContainer;

and then update the HTML:


<ng-template #videoFile>
  <video #videoFileContainer controls autoplay>
    <source [src]="currentAttachment.url"/>
  </video>
</ng-template>
user_49395300

try this

<source src="{{currentAttachment.url}}" type="video/mp4" />

you're doing some syntax error

user_48919040

I don't work with angular however I know you have to remove the video tag and re remake the video tag with new src

user_120095930
Related