codecamp

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}

现在,当您单击视频时,它将视情况更新 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 属性的绑定。


Svelte Each 块绑定
Svelte 尺寸的绑定
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Svelte module context

Svelte 调试

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }