99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

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

2023-02-21 15:02 更新

<audio> 和 <video> 同樣支持部分的屬性綁定,接下來(lái)演示其中幾個(gè)屬性。

在代碼第116行, 添加上對(duì) 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)您單擊視頻時(shí),它將視情況更新 time、duration 和 paused 屬性的值。這意味著我們可以使用它們來(lái)創(chuàng)建自定義控件。

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

針對(duì) <audio> 和 <video> 的 6 個(gè)readonly 屬性綁定 :

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

...以及 4 個(gè)雙向 綁定:

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

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)