I'm using "electron": "19.0.4", "@angular/core": "13.2.4" and "@videogular/ngx-videogular": "5.0.1.
On my jukebox, when a human song request is done, the song is downloadeded, and request.song.location is updated to "file://whatever". Only when it´s totally downloaded I dynamically create a component with this:
<vg-player (onPlayerReady)="onReady($event)">
<vg-buffering></vg-buffering>
<video #media
[vgMedia]="$any(media)"
crossorigin
preload="auto">
<source [src]="request.song.location" height="auto" id="{{request.song.name}}" type="video/mp4" width="100%">
</video>
</vg-player>
On the HTML source, I can see the source src correctly updated. And when it triggers the onReady
onReady(api: VgApiService) {
this.player = api;
this.media = player.getDefaultMedia();
console.log('MEDIA', this.media);
this.player.play();
When the song is played, I just can see a spinning wheel, and on the log
the media has the canPlay: false
VgMediaDirective {api: VgApiService,
ref: ViewRef$1, state: 'paused', time: {…}, buffer: {…}, …}
api: VgApiService {medias: {…},
playerReadyEvent: EventEmitter_,
isPlayerReady: true,
videogularElement: vg-player.ng-tns-c280-6, fsAPI: VgFullscreenApiService}
buffer: {end: 0}
bufferDetected: Subject {closed: false, observers: Array(1), isStopped: false, hasError: false, thrownError: null}
canPlay: false
canPlayObs: SafeSubscriber {initialTeardown: undefined, closed: false, _parentage: null, _teardowns: Array(1), isStopped: false, …}
canPlayThrough: false
canPlayThroughObs: SafeSubscriber {initialTeardown: undefined, closed: false, _parentage: null, _teardowns: Array(1), isStopped: false, …}
checkInterval: 200
currentPlayPos: 0
elem: video
If the file is not downloaded, because it´s already on the song.location route. Then I have no problems. This code was working previously on an Electron 8 , Angular 7 with the original videogular. Any idea how to fix it? Cheers
Luckily there's a hacky way to solve the issue, just by wrapping the whole vg-player element with this:
<div *ngIf="request.song.location.length">