#Video source not being reflected when changed

7 messages · Page 1 of 1 (latest)

glass ruin
#

I have two sibling components. Component A which has a list of all the videos and component B which should display the selected video from component A. I created a service which contains a behavior subject and when the user clicks on the video it stores the path of the video and then I subscribed to that subject in component B. When I console the result it is working and I can see the value from component B but on the screen the video is not being rendered.

the service :

export class VideoService {
  public videoSource: BehaviorSubject<string> = new BehaviorSubject<string>('');
  constructor() {}
}

component A :

<div class="container">
  <video width="200" #videoSource1 (click)="selectVideo(1)">
    <source src="../../../assets/SignalR.mp4" type="video/mp4" />
    Your browser does not support HTML video.
  </video>
  <video width="200" #videoSource2 (click)="selectVideo(2)">
    <source src="../../../assets/video1830873577.mp4" type="video/mp4" />
    Your browser does not support HTML video.
  </video>
</div>

 constructor(private videoService: VideoService) {}
  selectVideo(videoId: number) {
    let videoSrc: string = '';
    if (videoId === 1) {
      videoSrc = '../../../assets/SignalR.mp4';
    } else if (videoId === 2) {
      videoSrc = '../../../assets/video1830873577.mp4';
    }
    this.videoService.videoSource.next(videoSrc);
  }

component B :

<video width="400" controls #videoElement>
  <source [src]="videoSource" type="video/mp4" />
  Your browser does not support HTML video.
</video>

videoSource: string = '../../../assets/Facebook 565582774511389(480p).mp4';

  constructor(public videoService: VideoService) {}
  ngOnInit(): void {
    this.videoService.videoSource.subscribe({
      next: (result) => {
        console.log('source from the videoComponent', result),
          (this.videoSource = result);
      },
    });
  }
floral glacier
#

Your video paths should be /assets/..., not ../../../assets/...

glass ruin
floral glacier
#

Start by experimenting with simple stuff. What happens if you hardcode the source of the video, and thus use

<video width="400" controls #videoElement>
  <source src="/assets/SignalR.mp4" type="video/mp4" />
  Your browser does not support HTML video.
</video>

?

glass ruin
floral glacier
#

That doesn't answer my question.

glass ruin