Video Initialization Issue When HLS is Not Supported

Description:

In our Angular project, we are using the component from the vidstack library. When the video is not in HLS format, the video fails to initialize correctly, even though the tag is correctly populated with the video src and contentType.

The issue occurs when isSupportedHLS is false, and the video source doesn't seem to load as expected. This prevents the video from being displayed on the page in non-HLS cases.

In our application, we conditionally support HLS videos. When the content is not in HLS format, the video fails to load unless the contentType is hardcoded. We expect the video player to function even when contentType is dynamically set, but currently it doesn't.

Steps to Reproduce:

Use vidstack player in an Angular project.
Attempt to load a non-HLS video by dynamically setting contentType via variable binding (e.g., [type]="contentType").
The video fails to load.
Change the type attribute in the HTML to a hardcoded "video/mp4".
The video loads correctly.

Expected Behavior: When isSupportedHLS is false, the video should load from the provided src and play normally.

Current Behavior:

The video does not load when the content is not in HLS format.
The media-player is rendered, but the video is not initialized.

Angular project Code Snippet:


<div class="container show-controls">
    @if(isSupportedHLS){
    <media-player #mediaPlayer playsinline [src]="src">
        <media-provider></media-provider>
        <media-video-layout [thumbnails]="thumbnails"></media-video-layout>
    </media-player>
    } @else {
    <media-player #mediaPlayer playsinline>
        <media-provider>
            <source [type]="contentType" [src]="src" />
        </media-provider>
        <media-video-layout></media-video-layout>
    </media-player>
    }
</div>


@Component({
  selector: 'app-media-player',
  standalone: true,
  imports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './media-player.component.html',
  styleUrl: './media-player.component.scss'
})

export class MediaPlayerComponent implements OnInit {
  @Input() src: string;
  @Input() thumbnails: string;
  @Input() contentType: string;
  @Input() isSupportedHLS: boolean;

  @ViewChild('mediaPlayer', { static: false }) mediaPlayerElement: ElementRef;
}

vidstack / player

Video Initialization Issue When HLS is Not Supported #1465