Load video source asynchronously

[xinthose]

Description

I load src asynchronously from a function in my component. When I set panelOverviewVideoURL to the correct URL, my video does not get the update, it just stays on a black screen and will never play. It does work if I hard code the src URL. Do I need to call a method from VgApiService to get the player to reload once it has the src?

Expected Behavior

src is set after component loads and it correctly loads the video

  <vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

    <vg-controls>
      <vg-play-pause></vg-play-pause>
      <vg-playback-button></vg-playback-button>

      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

      <vg-track-selector></vg-track-selector>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>

      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
      <source [src]="panelOverviewVideoURL" type="video/mp4">
    </video>
  </vg-player>

[xinthose]

I was able to get it to work with a *ngIf as suggested here. Is this still the preferred way to show one video asynchronously?

  <div *ngIf="panelOverviewVideo.length">
    <vg-player>
      <vg-overlay-play></vg-overlay-play>
      <vg-buffering></vg-buffering>

      <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
      </vg-scrub-bar>

      <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

        <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

        <vg-track-selector></vg-track-selector>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>

        <vg-fullscreen></vg-fullscreen>
      </vg-controls>
      <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
        <source src="{{panelOverviewVideo}}" type="video/mp4">
      </video>
    </vg-player>
  </div>
  <div *ngIf="!panelOverviewVideo.length">
    <p>Not available</p>
  </div>

[RumanaB]

Facing the same issue on using videogular. Setting the src dynamically using property of an object. When the object is reassigned, and property of that object has also been changed, it still doesn't change / reflect in the video.

Hence even though the user has selected a new title, the previous video continues playing.

               <vg-player style="max-height:300px; max-width:380px; margin-bottom: 10px; padding:5px;"
                *ngIf="rec_type == 'video'">
               <vg-overlay-play></vg-overlay-play>
                <vg-buffering></vg-buffering>
                <vg-scrub-bar> 
                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                    <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                 </vg-scrub-bar>

                <vg-controls>
                    <vg-play-pause></vg-play-pause>
                    <vg-playback-button></vg-playback-button>

                    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                    <vg-track-selector></vg-track-selector>
                    <vg-mute></vg-mute>
                    <vg-volume [fxHide.xs]=true [fxHide.sm]=true></vg-volume>

                    <vg-fullscreen></vg-fullscreen>
                </vg-controls>

                <video [vgMedia]="$any(media)"  preload="auto" crossorigin>
                    <source [src]=rec_url type="video/mp4">
                </video>
            </vg-player>

[paulm981]

I have the same issue where i am using vghls and when i change sources i get a file not found. The file is found if it is the first one selected but any source on the second selection is always not found?

<video #media #vgHls="vgHls" [vgMedia]="$any(media)" [vgHls]="currentSource" id="player" crossorigin>