Svelte 媒體標(biāo)簽的綁定

<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? 相當(dāng)于 ?bind:duration={duration}?

現(xiàn)在，當(dāng)您單擊視頻時，它將視情況更新 time、duration 和 paused 屬性的值。這意味著我們可以使用它們來創(chuàng)建自定義控件。

通常，在網(wǎng)頁中， 你會將?currentTime?用于對 ?timeupdate? 的事件監(jiān)聽并跟蹤。但是這些事件很少觸發(fā)，導(dǎo)致UI不穩(wěn)定。 Svelte 使用?currentTime? 對 ?requestAnimationFrame?進(jìn)行查驗(yàn)，進(jìn)而避免了此問題。

針對 <audio> 和 <video> 的 6 個readonly 屬性綁定 ：

• duration (readonly) ：視頻的總時長，以秒為單位。
• buffered (readonly) ：數(shù)組{start, end} 的對象。
• seekable (readonly) ：同上。
• played (readonly) ：同上。
• seeking (readonly) ：布爾值。
• ended (readonly) ：布爾值。

...以及 4 個雙向 綁定：

• currentTime ：視頻中的當(dāng)前點(diǎn)，以秒為單位。
• playbackRate ：播放視頻的倍速， 1 為 '正常'。
• paused ：暫停。
• volume ：音量，0到1之間的值。

<video> 還有多出了具有readonly 屬性videoWidth和videoHeight 屬性的綁定。