控制双向参考事件(视频、滑块)

Question

我的Blazor页面有一个视频和一个滑块。

滑块将根据视频时间移动。

此外，当用户控制滑块的进度时，视频时间也会移动。

换句话说，滑动条的onchange事件会影响视频，视频的timeupdate也会影响滑动条。正因为如此，当我控制滑动条时，滑动条会被短暂地画在它原来的位置，而不是我移动的位置，然后回到我移动的地方。

当我控制滑块时，我想停止视频的事件。

下面是我的代码。我使用Radzen的滑块和Blazored。视频

======剃刀页面======

@*video component*@
<BlazoredVideo VideoEventOptions="options"
TimeUpdateEvent=""="OnTimeUpdate"
id="video1"
style="width:100%;height:100%"
controls="controls">
<source src="@video1Path" type="video/mp4" />
</BlazoredVideo>
@*slider Component*@
<RadzenSlider @bind-Value="@currentVideoDuration" TValue="int" Min="0" Max="100" Change="@(e => OnChangeSliderValue(e))"></RadzenSlider>

======cs代码======

public void OnChangeSliderValue(dynamic value)
{
int nValue = value;
JSRuntime.InvokeVoidAsync("VideoTimeChange", "video1", nValue);
}
public void OnTimeUpdate(VideoState state)
{
int currentTime = (int)state.CurrentTime;
currentVideoDuration = (int)state.CurrentTime;
}

======js代码======

function VideoTimeChange(id, time) {
var vid = document.getElementById(id);
vid.currentTime = time;
}

请分享您对JavaScript、Blazor 的了解

Answer 1

试试这个-因为一切都是异步发生的，如果你设置了一个标志，然后运行JS并等待它，然后重置标志-可以让OnTimeUpdate方法中的代码知道它应该在一段时间内忽略更新。

bool allowTimeUpdates = true;
public async Task OnChangeSliderValue(dynamic value)
{
allowTimeUpdates = false;
int nValue = value;
await JSRuntime.InvokeVoidAsync("VideoTimeChange", "video1", nValue);
allowTimeUpdates = true;
}
public void OnTimeUpdate(VideoState state)
{
if (allowTimeUpdates)
{
int currentTime = (int)state.CurrentTime;
currentVideoDuration = (int)state.CurrentTime;
}
}