To reduce net traffic, these video files are only downloaded from server once and stored in cache dir. Every time playing video is fetched from local storage.
<video src="file:///path/to/video.mp4"> is not available for error message "Not allowed to load local resource". but local file is readable in C# segment. is there anyway to feed C# filestream object to html? js method URL.createObjectURL requires file instead of filestream. It's impossible to load whole video file instantly.
UPDATE:I found DotNetStreamReference to do this, refer https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#stream-from-net-to-javascript But I meet a new Error Uncaught TypeError: Failed to execute 'appendBuffer' on 'SourceBuffer': Overload resolution failed.
The whole code in Home.razor is:
@page "/"@inject IJSRuntime JS<h1>Hello, world!</h1>Welcome to your new app.<p>@filepath</p><video src="" /><script> async function streamToJavaScript(streamRef) { const video = document.querySelector("video"); const stream = await streamRef.stream(); const mediaSource = new MediaSource(); video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener("sourceopen", () => { const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); sourceBuffer.addEventListener("updateend", () => { mediaSource.endOfStream(); video.play(); //console.log(mediaSource.readyState); // ended }); sourceBuffer.appendBuffer(stream); }); }</script>@code { string filepath = Path.Combine(FileSystem.Current.CacheDirectory, "01_welcome.mp4"); protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); using var file = File.OpenRead(filepath); using var streamRef = new DotNetStreamReference(file, true); await JS.InvokeVoidAsync("streamToJavaScript", streamRef); }}