Svelte中如何通过prop获取/设置video.currentTime？

完全可以实现你的需求，而且不需要依赖容易出问题的标志位，通过数值差异判断就能避免竞态问题。下面是具体的实现方案：

核心思路 #

利用Svelte的响应式特性和video原生事件，同时处理外部更新playbackTime和视频自身播放导致currentTime变化两种场景，通过微小的阈值判断来避免循环触发和竞态。

示例代码 #

<script>
  export let playbackTime = 0;
  let videoElement;

  // 监听视频播放时的时间变化，同步到playbackTime
  function handleTimeUpdate() {
    // 用0.1秒的阈值过滤微小波动，避免和外部更新冲突
    if (Math.abs(videoElement.currentTime - playbackTime) > 0.1) {
      playbackTime = videoElement.currentTime;
    }
  }

  // 响应式监听playbackTime的外部更新，同步到视频currentTime
  $: if (videoElement && Math.abs(videoElement.currentTime - playbackTime) > 0.1) {
    videoElement.currentTime = playbackTime;
  }
</script>

<video
  bind:this={videoElement}
  on:timeupdate={handleTimeUpdate}
  {...$$restProps}
/>

方案说明 #

1. 不暴露video元素：通过bind:this在组件内部获取video实例，外部无法直接访问，符合你的封装需求。
2. 避免竞态循环：不管是外部修改playbackTime还是视频自身播放导致currentTime变化，都通过数值差异阈值判断是否需要同步。只有当两者的差值超过设定的0.1秒时才执行更新，既过滤了视频播放时的微小时间波动，也避免了双向同步时的循环触发。
3. 灵活性扩展：$$restProps可以让组件直接接收video的原生属性（比如src、controls、autoplay等），不需要额外定义prop，保持组件的通用性。

使用方式 #

在父组件中直接双向绑定playbackTime即可：

<script>
  import VideoPlayer from './VideoPlayer.svelte';
  let currentPlayback = 0;
</script>

<VideoPlayer src="your-video-url.mp4" bind:playbackTime={currentPlayback} />
<p>当前播放时间：{currentPlayback.toFixed(1)}</p>

内容的提问来源于stack exchange，提问作者Chris