被HTML视频标签锁定的文件

Question

我有一个Blazor对话框，在其中我从磁盘上的目录显示视频。可以选择上传的视频。选择"上传"按钮后，将视频上传到服务器。上传后，需要将文件移动到存档中。问题来了。当我尝试移动文件时，它抱怨它正在被另一个进程使用。这可能是包含视频的标签

剃刀代码:

<RadzenListBox TValue="FileDto"
@ref=FileListBox
Data=@TakesList>
<Template Context="takeIn">
<RadzenCard>
@{
var take = takeIn as FileDto;
}
<div class="row">
<RadzenCheckBox TValue="bool" @bind-Value=take.IsSelectedForUpload class="col-auto"/>
<div class="col-auto">
<video class="w-25" controls @ref=@take.VideoReference>
<source src=@($"{@take.FileName}#t=9.5") type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<RadzenProgressBar Max=100 Value=@take.PercentageFinished Visible=@(take.PercentageFinished > 0) />
</RadzenCard>
</Template>
</RadzenListBox>

是否有一种方法可以让标签释放文件并关闭它?

== EDIT ==

好的，我想，如果我创建一个缩略图来显示它呢?它不会锁文件。这很好。现在我已经添加了一个带有视频播放器的新对话框，并在那里播放视频。我希望当我关闭对话框时，视频将被解锁，但唉，情况并非如此。播放视频并关闭对话框后，文件保持锁定状态。

Answer 1

好的，我在这里发现了一个技巧:如何正确卸载/销毁一个VIDEO元素，它确实在控制台上给出警告，但我认为这是一个小问题。

把它放在你的_Layout.cshtml:

<script>
// We need to do this because the browser locks the files blocking archiving and deleting.
window.removeMedia = () => {
console.info('Removing media');
let videos = document.getElementsByTagName('video');
for (let vid in videos) {
if (typeof videos[vid] == 'object') {
let srcs = videos[vid].getElementsByTagName('source');
videos[vid].pause();
for (let xsrc in srcs) {
if (srcs[xsrc].src !== undefined) {
srcs[xsrc].src = '';
}
}
videos[vid].load();
videos[vid].parentNode.removeChild(videos[vid]);
}
}
}
</script>

为了完成，下面是播放视频的对话框。

剃刀内容:

@inherits PageBase
<div class="col-auto">
<video class="w-75" controls autoplay>
<source src=@($"{@VideoPath}") type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

内容背后的代码:

using MetadataEnricher.Core.Dtos;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace MetadataEnricher.Pages.Dialogs
{
public partial class VideoPlayerDialog : PageBase, IDisposable
{
[Inject]
IJSRuntime JS { get; set; }
[Parameter]
public FileDto Take { get; set; }
public string VideoPath { get; set; }
protected override void OnInitialized()
{
VideoPath = Take.FileName;
DialogService.OnClose += DialogService_OnClose;
base.OnInitialized();
}
private async void DialogService_OnClose(dynamic obj)
{
await JS.InvokeAsync<string>("removeMedia");
VideoPath = null;
}
public void Dispose()
{
DialogService.OnClose -= DialogService_OnClose;
}
}
}