Svelte 媒体标签的绑定
<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"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}
bind:currentTime={time}
bind:duration
bind:paused
></video>
bind:duration 相当于 bind:duration={duration}
现在,当您单击视频时,它将视情况更新 time、duration 和 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 属性videoWidth和videoHeight 属性的绑定。