W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
<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 屬性videoWidth
和videoHeight
屬性的綁定。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: