SMIL in Parallel
SMIL 2023-05-25 14:28:13小码哥的IT人生
SMIL in Parallel
<par> 元素中的对象将同时显示(并行地)。
并行元素 <par>
<par> 元素拥有许多属性。最常用的属性有:
属性 | 值 | 描述 |
---|---|---|
begin | time | 设置元素显示之前的延迟。 |
dur | time | 设置显示的持续时间。 |
endsync | "first"|"last"|id(clip) | 同步元素的停止。 |
repeatCount | number | 设置显示的重复次数。 |
如需完整的 SMIL 元素和属性列表,请访问 phpcodeweb SMIL 参考手册。
同步(Synchronization )
通过在 <par> 标签中使用 endsync 属性,片段的并行组能够在同时停止。
endsync="first" 会在最短的片段结束时停止所有 <par> 组中的片段,无论其它片段的时间参数被如何设置。
endsync="last" 会在所有片段均结束播放时终止 <par> 组。这是默认的。
endsync="id(ID)" 会在被标示 (ID) 的片段结束时终止 <par> 组。该 ID 将引用该片段的 id 属性的值。
实例:同时显示
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<par>
<t:audio
src="liar.wav"
repeatCount="indefinite"
type="wav" />
<t:seq repeatCount="indefinite">
<h2 class="t" dur="1s">
I will display for one second</h2>
<h2 class="t" dur="2s">
I will display for two seconds</h2>
</t:seq>
</par>
</body>
</html>
完整实例【TIY】:
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:par>
<t:seq repeatCount="indefinite">
<h2 class="t" dur="1s">
I will display for one second</h2>
<h2 class="t" dur="2s">
I will display for two seconds</h2>
</t:seq>
<t:seq repeatCount="indefinite">
<img class="t" src="/i/eg_sun.gif" dur="1s" />
<img class="t" src="/i/eg_venus.gif" dur="2s" />
</t:seq>
</t:par>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html