Svelte 媒体标签的绑定

2023-02-21 15:02 更新

<audio> 和 <video> 同样支持部分的属性绑定,接下来演示其中几个属性。

在代码第116行, 添加上对 currentTime={time}duration 和 paused 属性的绑定

<video
	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4" rel="external nofollow" 
	on:mousemove={handleMousemove}
	on:mousedown={handleMousedown}
	bind:currentTime={time}
	bind:duration
	bind:paused
></video>

bind:duration​ 相当于 ​bind:duration={duration}

现在,当您单击视频时,它将视情况更新 timeduration 和 paused 属性的值。这意味着我们可以使用它们来创建自定义控件。

通常,在网页中, 你会将​currentTime​用于对 ​timeupdate​ 的事件监听并跟踪。但是这些事件很少触发,导致UI不稳定。 Svelte 使用​currentTime​ 对 ​requestAnimationFrame​进行查验,进而避免了此问题。

针对 <audio> 和 <video> 的 6 个readonly 属性绑定 :

  • duration (readonly) :视频的总时长,以秒为单位。
  • buffered (readonly) :数组{start, end} 的对象。
  • seekable (readonly) :同上。
  • played (readonly) :同上。
  • seeking (readonly) :布尔值。
  • ended (readonly) :布尔值。

...以及 4 个双向 绑定:

  • currentTime :视频中的当前点,以秒为单位。
  • playbackRate :播放视频的倍速, 1 为 '正常'。
  • paused :暂停。
  • volume :音量,0到1之间的值。

<video> 还有多出了具有readonly 属性videoWidthvideoHeight 属性的绑定。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号