Blazorise's video component plays m3u8. When I change the URL in the parent component, the source in the video's html will indeed change to the new URL, but the media is not loaded correctly by the player and cannot be played. When I change it to mp4, it works normally.
NET 8.0
Blazor Server
Blazorise.Bootstrap5 1.4.1
Blazorise.Video 1.4.1
@using Blazorise.Video
@if (IsValidUrl(Url))
{
<Video @ref="@videoRef"
Source="@Url"
CurrentTime="@currentTime"
DefaultQuality="1080"
Ended="Ended"
StreamingLibrary="StreamingLibrary.Hls"
Ratio="16:9"
AutomaticallyHideControls="true" />
}
else
{
}
@code {
[Parameter]
public string Url { get; set; }
[Parameter]
public Func<Task> Ended { get; set; }
Video videoRef;
double currentTime = 0;
private VideoSource videoSource;
private bool IsValidUrl(string url)
{
return Uri.TryCreate(url, UriKind.Absolute, out var uriResult)
&& (uriResult.Scheme == Uri.UriSchemeHttp || uriResult.Scheme == Uri.UriSchemeHttps);
}
protected override async Task OnInitializedAsync()
{
Console.WriteLine(Environment.NewLine + $"OnInitializedAsync SystemPlayer");
}
protected override async Task OnParametersSetAsync()
{
Console.WriteLine(Environment.NewLine + $"OnParametersSetAsync SystemPlayer");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
Console.WriteLine(Environment.NewLine + $"OnAfterRenderAsync SystemPlayer");
if (videoRef != null)
{
await videoRef.Play();
}
}
}
I checked the source code of these two files and tried the possible properties, methods, and events inside. None of them could make switching hls media work properly.
Blazorise.Video.VideoSource
Blazorise.Video.Video