1 / 120

第 6 章 SMIL 语言

第 6 章 SMIL 语言. 本章结构. 学习目标. 1. 知识目标：了解同步多媒体集成语言的特点，掌握 SMIL 语言的基本语法。 2. 技能目标：较熟练使用 SMIL 控制、组合多媒体，制作多媒体演示。 3. 素质目标：培养学生网络程序制作能力。. 6.1 SMIL 基础. 6.1.1 SMIL 的发展 6.1.2 SMIL 的特性 6.1.3 SMIL 的基本语法规则. 6.1.1 SMIL 的发展. 1 ．初识 SMIL

treva
Download Presentation

第 6 章 SMIL 语言

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第6章 SMIL语言

  2. 本章结构

  3. 学习目标 1.知识目标：了解同步多媒体集成语言的特点，掌握SMIL语言的基本语法。 2.技能目标：较熟练使用SMIL控制、组合多媒体，制作多媒体演示。 3.素质目标：培养学生网络程序制作能力。

  4. 6.1 SMIL基础 6.1.1 SMIL的发展 6.1.2 SMIL的特性 6.1.3 SMIL的基本语法规则

  5. 6.1.1 SMIL的发展 1．初识SMIL SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）是由W3C（World Wide Web Consortium，万维网协会）制定的多媒体操作语言，是XML的一个子集。在网络应用中，SMIL是用来集成多媒体节目的工具。

  6. 6.1.1 SMIL的发展 1．初识SMIL SMIL播放 如需播放 SMIL 呈现，你需要一个 SMIL 播放器。可以在因特网上找到不同的 SMIL 播放器： • RealNetworks的 RealOne 平台提供了对 SMIL 2.0 的充分支持 • Oratrix的 GRiNS for SMIL-2.0提供了一款 SMIL 2.0 播放器 • InterObject的 SMIL 播放器支持 SMIL 2.0 的基础框架

  7. 6.1.1 SMIL的发展 1．初识SMIL SMIL播放 在 Internet Explorer 中播放 SMIL 呈现 通过 Internet Explorer 5.5 或更新的版本，能够把 SMIL 元素插入 HTML 文件中。 通过这种方式，任何 SMIL 呈现都能作为标准的 HTML 文件运行在因特网上。

  8. 6.1.1 SMIL的发展 SMIL播放-案例 在 real player中播放： <smil> <body> <seq> <imgsrc="img1.jpg" dur="3s" /> <imgsrc="img2.jpg" dur="3s" /> </seq> </body> </smil>

  9. 6.1.1 SMIL的发展 SMIL播放-案例 在 浏览器中播放： <html xmlns:time="urn:schemas-microsoft-com:time"> <head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)}</style> </head> <body> <time:seq> <img class="time" src="img1.jpg" dur="3s" /> <img class="time" src="img2.jpg" dur="3s" /> </time:seq> </body> </html>

  10. 6.1.1 SMIL的发展 浏览器嵌入Real播放器进行SMIL播放-案例 WIN7、IE9开始已不支持SMIL，故目前通用的方法是：在 浏览器中嵌入播放器进行播放： <html> <head> </head> <body> <object classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA id=video1 style=LEFT:0px;TOP:0px width=800 height=600> ... <param name=SRC value=first-smil.smi> <param name=CONTROLS value=Imagewindow,ControlPanel,StatusBar> ... </object> </body> </html>

  11. 6.1.1 SMIL的发展 2．SMIL的发展 1997 年 3 月，W3C万维网协会建立了关于同步多媒体的工作组，开始了SMIL的开发。 1997 年 11 月SMIL 作为工作草案被提交，获得了RealNetworks、Microsoft 等公司的支持。 1998年6月，W3C正式推荐了SMIL1.0。 1999年8月，W3C 推出了SMIL Boston版本，在功能上有许多重要的扩展。 2001年8月，SMIL 2.0成为官方建议标准。 2005年12月，SMIL 2.1正式成为官方建议标准。

  12. 6.1.2 SMIL的特性 1．同时播放多种格式媒体 2．同时播存储在不同地方（服务器上）的多媒体片段 3．灵活控制媒体播放 4．可进行页面布局 5．多语言选择支持 6．多带宽选择支持 7．编辑方便

  13. 6.1.2 SMIL的特性 多语言选择支持 分析这样一个实际例子：我们要为某种产品作宣传，其宣传对象是多个国家的人，有英语国家的、有法语国家的、有德语国家的等等。当然最主要是讲中文的国家的人（我是中国人！）。如果我们想要所有的人都可以听懂、看懂我们的介绍，那么我们就的准备不同语言版本的媒体文件。传统的方法是让用户来选择，然后从服务器上下载相应的版本。麻烦就不用讲了。万一我们的选择老外都看不懂(有时候，我到德文、日文、朝鲜文的站点上，就不知道他们讲些什么东西L),这怎么办？如果把他们用SMIL来组织起来、规定好，那么SMIL语言将根据具体的语言设置来播放相应版本的演示。就是方便！

  14. 6.1.2 SMIL的特性 多带宽选择支持 由于各个用户连接到Internet的方式不尽相同，所以其连接的速度差别也较大。为了让他们都能够看到我们的演示，我们可以制作适应不同传输速度的演示。在传统的方法中，往往要用户自己选择他的机器连接所对应的传输速度，然后播放相应得演示文件。这确实解决了一些问题。实际上，并不是所有的用户都知道自己的连接速度，就是知道了，还得选择不也是非常麻烦吗？SMIL解决这个问题如同吹灰！播放器检测出用户的连接速度后，就同服务器“协商”，要求传输并播放相应的演示文件。

  15. 6.1.3 SMIL的基本语法规则 SMIL作为一种标记语言，其格式类似于HTML，主要通过各种标记来表示和组织各种对象，通常标记由符号“<”“>”以及其中所包含的标记元素组成。 SMIL采用简捷的语法命令，设置各种标记、元素及属性，建立与各种媒体文件的关联和播放设置。

  16. 6.1.3 SMIL的基本语法规则 • SMIL的结构 SMIL只包含结构和指向内容的URL，不会将结构和内容混杂在同一个文档中。 --例如，SMIL文档只会包含指向相应文本文件的URL，而HTML通常将文本包含在文档的body中。

  17. 6.1.3 SMIL的基本语法规则 Smil文件的基本结构 <smil> <head> <layout> <!--layout 标签--> </layout> </head> <body> <!--body标签 --> </body> </smil>

  18. 6.1.3 SMIL的基本语法规则 2. SMIL的格式要求 1）SMIL程序以<smil>开始，以</smil>结束 2）整个程序由body和head两个部分组成 3）基于XML,属性和标记一般要求小写，属性值不分大小写 4）在SMIL中，所有的标识都必须有明显的结束符 5）属性值必须用双引号括起来 6）SMIL文件必须以.smil 或者.smi为扩展名来保存 7）附加信息写在<head></head>之间 8）用< !-- … -->进行注释

  19. 6.1.3 SMIL的基本语法规则 3. Media媒体元素 1）媒体元素的类型

  20. 6.1.3 SMIL的基本语法规则 2）媒体元素的常用属性(erase, src, type, dur, begin, end, repeat,...)

  21. 6.1.3 SMIL的基本语法规则 4. Timing时间元素 1）时间元素的类型

  22. 6.1.3 SMIL的基本语法规则 2）时间元素的常用属性(begin, dur, repeatCount,...)

  23. 6.1.3 SMIL的基本语法规则 3）媒体元素的使用 在SMIL中，媒体元素的使用与HTML略有相同，但所有XML标记符不需要第二个结束标记符，因而需要一个反斜线放在结尾。 --HTML格式：<img src="http://www.cis.edu.cn/images/think.jpg"> --SMIL格式：<img src="http: //www.cis.edu.cn/images/think.jpg " />

  24. 6.2 SMIL的详解和应用 6.2.1 组合媒体文件 6.2.2 时间控制 6.2.3 布局设计 6.2.4 链接制作 6.2.5 动画效果 6.2.6 转场效果 6.2.7 字幕制作

  25. 6.2.1组合媒体文件 SMIL的核心功能基于<par>和<seq>这两个元素： --<par>是“parallel”（并行）的缩写 --<seq>是“sequence”（序列）的缩写。 这两个元素可以嵌套，可以在子序列中同时开始几个媒体对象，也可以在一个序列中同时播放几个对象。

  26. 6.2.1组合媒体文件 1. <seq> </seq>标记 位于<seq>和</seq>标识之间之间的代码称之为序列。 序列中的媒体元素将会被依次地表示——即在前一个元素表示完成之后才开始当前元素的表示。 有多种不同的方法可以确定一个媒体元素应该在什么时候表示结束。

  27. 6.2.1组合媒体文件 <smil> <head> </head> <body> <seq> <audio src="sample1.mp3" /> <audio src="sample2.mp3 " /> <audio src="sample3.mp3" /> </seq> </body> </smil> 该序列在一行中播放3个音频文件。每个元素在音频信号播放完成的时候结束，一旦当前的元素播放结束了，下一个就开始播放。

  28. 6.2.1组合媒体文件 <smil> <head> </head> <body> <seq> <img src=“Koala.jpg" dur=“5s” /> <video src=“sample1.rv" dur=“50s" /> </seq> </body> </smil> 第一个图像在显示5秒之后就停止，然后出现视频，并播放50秒。

  29. 6.2.1组合媒体文件 2. <par> < /par>标记 使用并行组合标记<par>和</par>，可以同时播放多个媒体对象。并行元素的表示会同时进行，但不一定是同时结束。 <par> <audio src=“sample3.mp3" /> <img src=“img1.jpg" region="images" dur="30s"/> <text src="zimu.txt" region="text" dur="30s"/> </par>

  30. 6.2.1组合媒体文件 3. 组合序列和并行 可以将一组并行的媒体元素组合为一个序列。 在序列中，并行组被处理为一个单独的整体元素。 并行组中的所有元素在序列中的某个合适时间点上同时开始表示，当并行组中的最后一个元素结束时，序列就往下继续。

  31. 6.2.1组合媒体文件 <seq> <img src="img1.jpg" region="image" dur= "5s" /> <par> <audio src="sample1.mp3" /> <video src="sample2.rv" region="video" /> </par> <text src="zimu.txt" dur="10s" region="text" /> </seq> img1.jpg首先被播放。sample1.mp3和sample2.rv部分在img1.jpg结束之后同时开始，当这两部分表示结束后，zimu.txt部分才开始显示。

  32. 6.2.1组合媒体文件 如果将两种组合标记互换，大家将看到完全不同的播放时间效果。 <par> <img src=“img1.jpg" region="image" dur=“5s" /> <seq> <audio src=“sample1.mp3" /> <video src=“sample2.rv" region="video" /> </seq> <text src="zimu.txt" dur="10s" region="text" /> </par> img1.jpg、sample1.mp3和zimu.txt部分同时开始播放，当 sample1.mp3结束之后sample2.rv开始播放。

  33. 6.2.1组合媒体文件 4. 使用简单的结构 可以以不同的方式组合并行元素和序列元素，来达到同样的效果。 导入SMIL结构的每个元素都需要时间开销，从而轻微地延迟演示开始的时间。在可能的情况下，应该尽量选择需要创建的媒体元素最少的结构。

  34. 6.2.1组合媒体文件 创建一个并行元素组成的序列，假设有20个图像对，这需要创建一个含有20个并行元素的元素序列，每个并行元素带有2个媒体元素。 这样文件就包含21个结构化的元素，如下所示。

  35. 6.2.1组合媒体文件 <seq> <par> <img src=" img1.jpg" region="image" dur=“5s" /> <text src=" zimu1.txt" region="text" dur=“5s" /> </par> … … … <par> <img src=" img20.jpg " region="image" dur=“5s" /> <text src=" zimu20.txt " region="text" dur=“5s" /> </par> </seq>

  36. 6.2.1组合媒体文件 类似地，创建一个单独的带有2个序列并行元素，一个是上序列，一 个是下序列，每个系列带有20个媒体元素，如下所示。 <par> <seq> <img src=" img1.jpg" region="image" dur=“5s" /> <img src=“img2.jpg" region="image" dur=“5s" /> … … … </seq>

  37. 6.2.1组合媒体文件 <seq> <text src=" zimu1.txt" region="text" dur=“5s" /> <text src=" zimu2.txt" region="text" dur=“5s" /> > … … … </seq> </par> 这需要为各个媒体元素提供相同的设置，虽然在最终的文件中只需3个结构化的元素，但在打开速度上如何？

  38. 6.2.2时间控制 时间控制用来规定媒体对象或是媒体文件组合： --在何时播放 --播放多长时间 它的建立是通过SMIL中各个相关的媒体标记或是组合标记的时间属性来实现的。 所有的时间属性都是可选的，如果在相应标记中不设置它们，媒体对象播放的开始和终止时间就取决于各自的内部时间线以及它们在<par>或者<seq>组合中的位置。

  39. 6.2.2时间控制 1. 时间值的表示 在SMIL中，时间属性的取值可以有两种表示方法。 一种是归一表示法，即使用小时、分等某一个时间单位表示时间，如1.5h、3.25 min、20s。 另一种是时钟表示法，即采用“hh：mm：ss”的格式，即小时：分：秒：毫秒。

  40. 6.2.2时间控制 2. 设置播放的持续时间 媒体标记和组合标记的dur属性定义了对应的媒体对象或是文件组合从开始播放起，到播放结束的时间。 <seq> <video src="sample1.rv" dur="00:00:20" /> <video src="sample2.rv" dur="3s" /> </seq> 这里使用“dur”对sample1.rv 和 sample2.rv 的持续时间做了规定， sample1.rv持续时间 20 秒， sample2.rv持续时间 3 秒。

  41. 6.2.2时间控制 3. begin 和 end 属性 通过begin和end参数，可以为媒体元素指定一个明确的起始时间和结束时间，或指定一个表示开始或结束的触发器。 指定的时间值是相对于元素正常开始时刻的时间，该时间值所表达的确切含义要根据该视频媒体在SMIL文件中所处的位置来决定。

  42. 6.2.2时间控制 <img src=“img1.jpg" begin=“3s“ dur=“3s”/> 如果指定一个结束时间，则元素的表示会在自然开始的一定时间后结束。 <img src=“img2.jpg“ begin="5s" end=“10s" /> 上述语句可以得到的时间点为：①如果该元素是<seq></seq>序列的一部分，则会在前一个元素结束3秒钟后开始；②如果该元素是<par></par>组的一部分，则会在整个组开始3秒钟后开始。 图像在整个演示进行5秒钟后开始，并在整个演示的10秒后结束，播放时长是5秒。元素的时长等于其起始时间减去结束时间。

  43. 6.2.2时间控制 如果没有指定begin参数的值， end参数的值就等于dur参数的值。 < img src=“img1.jpg" end="10s"/> 如果播放的视频在一个组中，它就得服从组的时间。 <smil> <body> <seq dur="10s"> <img src="img1.jpg" begin="5s" dur="20s"/> </seq> </body> </smil> img1.jpg 所在的组的持续时间为 10 秒，而img1 .jpg 自己要求持续 15 秒，这是不行的。实际上img1 .jpg 的显示时间只有 10-5=5 秒。

  44. 6.2.2时间控制 4. clip-begin 和 clip-end 属性 可以通过clip-begin和clip-end属性在媒体元素中指定一个片段。注意与begin/end的区别。 该特性可使用户从一个较长的文件或流中播放选定的部分。它不能应用于通过HTTP发布的文件，因为即使实际播放的只是一个小片段，HTTP文件也总是完全下载。

  45. 6.2.2时间控制 播放sample1.rv中的片段，从第5秒开始，在60秒结束 <smil> <body> <video src=" sample1.rv" clip-begin="5s" clip-end="60s"/> </body> </smil> clip-begin 和 clip-end 属性是用内部时间控制的属性。内部是指媒体片段自己的时间线（timeline）。clip-begin规定在何处开始播放，clip-end规定放到何处结束。

  46. 6.2.2时间控制 <smil> <body> <par> <video src="sample1.rv" clip-begin="5s" dur="20s"/> <video src="sample2.rv" begin="5s" clip-begin="5s" clip-end="20s"/> </par> </body> </smil> 首先sample1.rv 从 5 秒处开始播放，播放 持续5 秒以后，sample2.rv 从自己的5秒处开始与sample1.rv 一起播放，sample1.rv 播放到自己的 25 秒处停止播放，sample1.rv 播放了 25-5=20 秒。 sample2.rv 播放到自己的 20 秒处停止播放，sample2.rv 播放了20-5=15 秒。

  47. 6.2.2时间控制 5. fill 属性 当演示中的某个片段播放完成后，可以用fill属性来规定它的显示状态。 Fill常用属性值有“remove”、“freeze”、“transition”。 --remove是fill属性的默认值，定义的行为是媒体对象播放结束后，将从播放区域中消失，显示区域默认的背景色 --freeze表示，结束时保留显示最后一帧画面，直到有效时间结束 --transition表示，场景转换效果

  48. 6.2.2时间控制 <smil> <body> <video src= “sample2.rv" region="video" dur= " 35s" fill="freeze"/> </body> </smil> 假设 sample2.rv的长度是 30 秒，那么在这里规定的就是：在 sample2.rv播放终了以后，屏幕上 显示的是 sample2.rv 的最后一帧画面，显示的时间是 35-30=5 秒。

  49. 6.2.2时间控制 6．repeat 属性 如果希望某个片段或者全部的片段重复播放若干次，可使用 repeat 属性来实现该效果。 <smil> <body> <video src= "sample2.rv" dur="13s" repeat="3"/> </body> </smil> 上述实例是使sample2.rv 播放3次。如果想让某个片段一直播放下去，则repeat=“indefinite”。

  50. 6.2.3布局设计 布局就是在屏幕上规定各个媒体片段显示的位置。 如果使媒体播放器的主窗口在播放不同的媒体对象时都保持同样的大小; 或者在同一时间内要同时播放多个可视媒体对象，就必须通过SMIL文件窗口布局的设置，来定义媒体播放器的主窗口大小以及各播放区域的大小和位置，并在各播放区域中放置相应的媒体对象。 窗口布局需要<layout>和</layout>标记。

More Related