Javascript 用 Tauri 和 Svelte 加载新视频时如何更新视频的当前时间

我目前正在与Tauri和Svelte一起创建一个Windows应用程序，但遇到了一些问题.我有一个按钮，当点击它打开文件系统，允许 Select 一个新的视频.当 Select 新视频时，我使用新路径更新视频存储.这一切都工作得很好，使用下面的代码，视频然后更新以显示新的视频，但是我也想重置time = 0，以便新的视频从头开始，但这在这里没有发生.因此，如果 Select 新文件时上一个视频的开始时间为20秒，则新视频的开始时间也为20秒.

当点击重置按钮时，时间变回0，但我希望它也自动发生时，视频store 得到更新和新的视频被加载.

当$VideoStore发生变化时，我会更新time，时间与视频的currentTime有关:

    $: {
        time = 0;
        video_src = `https://asset.localhost/${$VideoStore}`;
    }

The full code:个

Video.svelte个

<script>
    import VideoStore from "../stores/VideoStore";

    let video_src = $VideoStore;

    let time = 0;
    let duration;
    let paused = true;

    const skip = () => {
        time += 10;
    };

    function resetTime() {
        time = 0;
    }

    $: {
        time = 0;
        video_src = `https://asset.localhost/${$VideoStore}`;
    }
</script>

<p>{time}</p>
<button on:click={resetTime}>Reset</button>
<button on:click={skip}>Skip 10 seconds</button>
<!-- svelte-ignore a11y-media-has-caption -->
<div class="player">
    {#key video_src}
        <video
            src={video_src}
            width="1280"
            height="720"
            bind:currentTime={time}
            bind:duration
            bind:paused
            controls
        >
        </video>
    {/key}
</div>

OpenButton.svelte个

<script>
    import { open } from "@tauri-apps/api/dialog";
    import { documentDir } from "@tauri-apps/api/path";

    import VideoStore from "../stores/VideoStore";

    let filename = "";

    const openfile = async () => {
        const selected = await open({
            directory: false,
            multiple: false,
            defaultPath: await documentDir(),
        });

        filename = selected.replace(/\\/g, "/");
        VideoStore.update(() => {
            return filename;
        });
    };
</script>

<button on:click={openfile}>Open File</button>