⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 0503-0400.htm

📁 xml帮助文档
💻 HTM
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0071)http://162.105.170.55/ASPs/GetLearningArticleTemp.asp?section=0503-0400 -->
<HTML><HEAD><TITLE>XML中国论坛 - 初学进阶 - 5.3.4 面向多媒体：融时空于一体——SMIL</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TABLE {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"
}
.pt9 {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"
}
.pt10 {
	FONT-WEIGHT: 700; FONT-SIZE: 10pt; LINE-HEIGHT: 18pt; FONT-FAMILY: "宋体"
}
.TempOutline {
	FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; COLOR: #666666; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.TempOutline1 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; COLOR: #666666; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline {
	FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline1 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline11 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage0 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage1 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage11 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage111 {
	FONT-SIZE: 9pt; MARGIN-LEFT: 51pt; TEXT-INDENT: -64pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
</STYLE>



<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0 
onload=""><!-- 以下为主体内容 -->
<div align="center">
  <center>
<TABLE width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
  <TBODY>
  <TR vAlign=top>
    <TD width=39 rowSpan=2></TD>
    <TD vAlign=center width="551" >
    <p align="center"><IMG height=33 
      src="image/title_learner.gif" width=226></TD>
    <TD width=39 rowSpan=2></TD>
    </TR>
  <TR vAlign=top>
    <TD width="551" ><!-- 正文内容 -->
      <DIV class=pt10><B>5.3.4 面向多媒体：融时空于一体——SMIL</B></DIV>
   
   &nbsp;&nbsp;&nbsp;
      <DIV></DIV><BR>
      <DIV class=pt9>
      <P>SMIL的全称是同步多媒体合成语言，即Synchronized Multimedia Integration 
      Language。它是一种用于描述多媒体演示文档的语言，允许将一批独立的多媒体对象，包括视频、音频、图象、文字等等，在时间和空间轴上集成为一个同步的多媒体演示文档。这个规范继承了XML跨平台的优点，而且将所有资源都以URI的形式存在网络中，无须编译即可使用，推出后得到了众多厂商的支持。</P>
      <P>SMIL包含了以下三方面的内容： 
      <OL>
        <LI>描述演示文档的屏幕布局 </LI></OL>
      <P>利用layout定义窗口布局，其子元素root-layout描述主浏览窗口，region用来把窗口分为若干个区域，确定各个区域的位置、背景等等。</P>
      <P>下面的SMIL片段定义了一个主窗口，并在其中定义了左右两个区域：</P>
      <DIV align=center>
      <CENTER>
      <TABLE width="80%" border=1>
        <TBODY>
        <TR>
          <TD width="100%">&lt;layout&gt;<BR>&lt;root-layout 
            background-color="white" height="300" width="450"/&gt;<BR>&lt;region 
            id="scene" top="0" left="0" height="300" 
            width="350"/&gt;<BR>&lt;region id="comment" top="20" left="370" 
            height="260" 
      width="430"&gt;<BR>&lt;/layout&gt;</TD></TR></TBODY></TABLE></CENTER></DIV>
      <OL start=2>
        <LI>描述演示文档的时间行为 </LI></OL>
      <P>屏幕中可以包含动画animation、视频video、音频audio、文本流textstream、文本text、图片image。这些多媒体对象可以用pal标记组织成并发形式，也可以用seq标记组织成串行形式。对于每个对象，又可以利用属性begin、end、dur、endsync、repeat具体规定它的起止时间。请见下例：</P>
      <DIV align=center>
      <CENTER>
      <TABLE width="80%" border=1>
        <TBODY>
        <TR>
          <TD width="100%">&lt;par&gt;<BR>&lt;seq id="places"&gt;<BR>&nbsp; 
            &lt;img id="London" region="scene" src="image/london.jpg" 
            dur="15s"/&gt;<BR>&nbsp; &lt;img id="Paris" region="scene" 
            src="image/paris.jpg" begin="10s" end="25s"/&gt;<BR>&nbsp; &lt;img 
            id="Washington" region="scene" src="image/washington.jpg" dur="15s" 
            begin="id(washington)(35)"/&gt;<BR>&lt;/seq&gt;<BR>&lt;textstream 
            id="commenttext" region="comment" src="comment.rt" 
            endsync=id(places)/&gt;<BR>&lt;audio id="bgmusic" 
            src="audio/background.rm" 
        repeat="15"/&gt;<BR>&lt;/par&gt;</TD></TR></TBODY></TABLE></CENTER></DIV>
      <P><BR>结合前面的对空间布局的描述，这段代码的意思是：在窗口左边的区域顺次播放三幅图片，第一幅图片播放15秒，播放完毕后等待10秒后播放第二幅，第一幅图片播放完毕后的第25秒停止第二幅图片的播放，第35秒后开始播放第三幅图片，播放15秒。在播放图片的同时，右边的区域播放解说文字，直到左边的图片播放完毕后才停止播放。除此之外，还有背景音乐，将这段音乐播放15次。 

      <OL start=3>
        <LI>描述媒体对象间的相关链接 </LI></OL>
      <P>SMIL中的超链接类似于HTML中的超链接，用户可以从一个媒体对象访问到另一个对象。其中有两个标记可供使用。标记&lt;a&gt;与HTML中的&lt;a&gt;非常相似，只是增加了属性show来规定超链接激活时，浏览器是覆盖旧窗口、新建窗口、还是暂停原来的播放。标记&lt;ancher&gt;则可以使同一个对象的不同区域指向不同的链接，或者在不同的时间指向不同的链接。</P>
      <P>下面两段代码分别达到了这两种效果：</P>
      <DIV align=center>
      <CENTER>
      <TABLE width="80%" border=1>
        <TBODY>
        <TR>
          <TD width="100%">&lt;img id="London" region="scene" 
            src="image/london.jpg" dur="15s"&gt;<BR>&nbsp; &lt;anchor 
            href="london1" coords="0%,0%,50%,50%" show="new"/&gt;<BR>&nbsp; 
            &lt;anchor href="london2" coords="50%,50%,100%,100%" 
            show="new"/&gt;<BR>&lt;/img&gt;<BR><BR>&lt;img id="Paris" 
            region="scene" src="image/paris.jpg" begin="10s" 
            end="25s"&gt;<BR>&lt;anchor href="paris1" begin="0s" end="5s" 
            show="new"&gt;<BR>&lt;anchor href="paris2" begin="5s" end="15s" 
            show="new"&gt;<BR>&lt;/img&gt;</TD></TR></TBODY></TABLE></CENTER></DIV>
      <P><BR>最后说一说SMIL的整体结构：</P>
      <DIV align=center>
      <CENTER>
      <TABLE width="80%" border=1>
        <TBODY>
        <TR>
          <TD width="100%">&lt;smil&gt;<BR>&nbsp; 
            &lt;head&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;!--屏幕布局描述--&gt;<BR>&nbsp; 
            &lt;/head&gt;<BR>&nbsp; &lt;body&gt;<BR>&nbsp;&nbsp;&nbsp; 
            &lt;!--时间行为描述--&gt;<BR>&nbsp; 
        &lt;/body&gt;<BR>&lt;/smil&gt;</TD></TR></TBODY></TABLE></CENTER></DIV>
      <P>把上述片段整合成一个完整的SMIL文件是这样的：</P>
      <DIV align=center>
      <CENTER>
      <TABLE width="80%" border=1>
        <TBODY>
        <TR>
          <TD width="100%">&lt;?xml version="1.0" 
            encoding="GB2312"?&gt;<BR>&lt;!DOCTYPE smil PUBLIC "-//W3C//DTD 
            SMIL1.0//EN" 
            "http://www.w3.org/TR/REC-smil/SMIL10.dtd"&gt;<BR><BR>&lt;smil&gt;<BR>&lt;head&gt;<BR>&nbsp; 
            &lt;layout&gt;<BR>&nbsp;&nbsp; &lt;root-layout 
            background-color="white" height="300" 
            width="450"/&gt;<BR>&nbsp;&nbsp; &lt;region id="scene" top="0" 
            left="0" height="300" width="350"/&gt;<BR>&nbsp;&nbsp; &lt;region 
            id="comment" top="20" left="370" height="260" 
            width="430"&gt;<BR>&nbsp; 
            &lt;/layout&gt;<BR>&lt;/head&gt;<BR><BR>&lt;body&gt;<BR>&nbsp; 
            &lt;par&gt;<BR>&nbsp;&nbsp; &lt;seq 
            id="places"&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;img id="London" 
            region="scene" src="image/london.jpg" 
            dur="15s"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;anchor href="london1" 
            coords="0%,0%,50%,50%" show="new"/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; 
            &lt;anchor href="london2" coords="50%,50%,100%,100%" 
            show="new"/&gt;<BR>&nbsp;&nbsp;&nbsp; 
            &lt;/img&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;img id="Paris" region="scene" 
            src="image/paris.jpg" begin="10s" 
            end="25s"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;anchor href="paris1" 
            begin="0s" end="5s" show="new"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; 
            &lt;anchor href="paris2" begin="5s" end="15s" 
            show="new"&gt;<BR>&nbsp;&nbsp;&nbsp; 
            &lt;/img&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;img id="Washington" 
            region="scene" src="image/washington.jpg" dur="15s" 
            begin="id(washington)(35)"/&gt;<BR>&nbsp;&nbsp; 
            &lt;/seq&gt;<BR>&nbsp;&nbsp; &lt;textstream id="commenttext" 
            region="comment" src="comment.rt" 
            endsync=id(places)/&gt;<BR>&nbsp;&nbsp; &lt;audio id="bgmusic" 
            src="audio/background.rm" repeat="15"/&gt;<BR>&nbsp; 
            &lt;/par&gt;<BR>&lt;/body&gt;<BR>&lt;/smil&gt;</TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
      <P></P>
      <P></P></TD></TR></TBODY></TABLE>
  </center>
</div>
<P></P>
<P>
<P></P></BODY></HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -