Video tag [src] not getting updated

Ionic Framework ionic-v3
1

Dear Ionites

I browsed around and I have not found a solution for this.

I’m using html video tag to display a video that is coming from an object:

<div *ngIf="myvideo">
<video controls width="100%" preload="auto">
        <source [src]="myvideo.uri" type="{{myvideo.mimeType}}"> Your mobile does not support the video tag.
    </video>
<h2 *ngIf="myvideo.title">{{myvideo.title}}</h2>
</div>

Now the page that displays the video allows (with the use of action-sheet) to select a different video object with different URI and and title.

But when I change the ‘myvideo’ object to contain new values, the video component still displays the previous video and does not change contents. The H2 tag is changing so I now that “myvideo” object value actually changes.

I think that it is the video element that does not refresh.

I also tried to set the ‘myvideo’ value to undefined before setting this to new value, to force (using the ngIf) to re-render the video element.

I also tried to change the values of ‘myvideos’ in a zone’s .run() function.

The same result. The contents of the video do not change.

Any ideas? Do I do something wrong? Is it a known bug?

Thanks in advance.
Costas

2

How do you update the myvideo object?

I think it is an correct behave. in AngularJS there was also no special ngSrc directive like for images.
Video-tags are producing stuff for streaming and so on. so it is not that easy to change the source after initialization.

Try to set your myvideo object to null before adding the new values :wink: --> your ngIf is triggered and the dom-node removed and readded.

3

Thank you for your answer.

But the result is the same. Setting it to ‘null’ did not help either. (I was using ‘undefined’ in my original code).

Which is really, really strange… Indeed the DOM is supposed to be re-build, but the video element, stays the same.

I’m going to create different elements with ngFor and have them ‘materialize’ with ngIf.
Let’s see.

4

Yep. Having an ngFor read through my array on videos, and ngIf to enable only the element that is selected, did the trick

5

Is there any solution? how to update video src.

    <video controls="controls" preload="metadata" autoplay="auto" id="video-player"  webkit-playsinline="webkit-playsinline" class="videoPlayer" style="width: 100%; margin-bottom: 10px;" *ngIf="videourl">
      <source id="VideoReload" [src]="videosrc" type="video/mp4" />
    </video>

When I replace video src with another URL, its not updated until i refresh the screen.
also NgZone is not working

Thanks in advance

6

Please provide enough code demonstrating exactly how you “replace video src” that is sufficient to reproduce the problem.