smil_SMIL简介-鞋串上的多媒体演示

culh2177

于 2020-07-29 23:53:05 发布

阅读量516

点赞数

文章标签： python java html css 人工智能

原文链接：https://www.sitepoint.com/presentation-shoestring/

版权

smil

Not every site owner or Web developer can afford Flash, Director or video editing or creation tools to integrate pictures, sound and video into their sites. Even PowerPoint might be out of your grasp. And, let’s face it — they’re not the easiest tools to master, either. But what if you do have Notepad, and a range of sound, video or image files? What’s the answer? SMILE! Or: SMIL, to be precise.

并非每个站点所有者或Web开发人员都能负担得起Flash，Director或视频编辑或创建工具来将图片，声音和视频集成到其站点中。 甚至PowerPoint可能都不在您的掌握范围内。 而且，让我们面对现实吧-它们也不是最容易掌握的工具。 但是，如果你有什么记事本，以及各种音频，视频或图像文件？ 答案是什么？ 微笑！ 或者：SMIL，准确地说。

什么是SMIL？ (What is SMIL?)

SMIL stands for Synchronised Multimedia Integration Language, and is specified by the W3C.

SMIL代表同步多媒体集成语言，由W3C指定。

What does it allow you to do? SMIL is an XML based mark-up language that allows you to combine separate images, sounds and video into a presentation. While it will not compete with Director or other similar products for high end functionality, the beauty of SMIL is that it’s easy. Very easy! If you had little or no trouble picking up HTML, then you’ll probably master SMIL in an hour.

它允许您做什么？ SMIL是一种基于XML的标记语言，使您可以将单独的图像，声音和视频组合成演示文稿。尽管SMIL不会与Director或其他类似产品争夺高端功能，但SMIL的优点在于它很容易。很简单！如果您几乎没有遇到HTML的麻烦，那么您可能会在一个小时内掌握SMIL。

SMIL结构 (The SMIL Structure)

SMIL is similar to HTML in that it’s split into a HEAD and a BODY section. However, one key difference here is that the basic spatial layout of the presentation is defined in the HEAD section, using regions. Then, content for those regions is added in the BODY section.

SMIL与HTML相似，它分为HEAD和BODY部分。但是，此处的主要区别在于，演示文稿的基本空间布局是在HEAD节中使用区域定义的。然后，将这些区域的内容添加到BODY部分中。

Take a look at the code below to see how these sections come together to form a document:

看一下下面的代码，看看这些部分如何组合在一起形成一个文档：

<smil>

  <head> 

    <layout> 

      <region id="reg1" top="0" left="0" width="300" height="200" /> 

      <region id="reg2" top="0" left="300" width="300" height="200" /> 

    </layout> 

  </head> 

  <body> 

    <seq> 

      <par> 

        <img id="img1" src="image.gif" region="reg1" dur="4s" /> 

        <audio id="aud1" src="audio.wav" dur="4s" /> 

      </par> 

      <par> 

        <img id="img2" src="image2.gif" region="reg2" dur="4s" /> 

        <audio id="aud2" src="audio2.wav" dur="4s" /> 

      </par> 

      <img id="img3" src="finish.gif" region="reg1" dur="4s" /> 

    </seq> 

  </body> 

</smil>

As you can see, the spatial layout is clearly defined in the HEAD section, and then media formats are defined to fill different regions as defined by region Ids, though you don’t need to define a region for sound files. You’ll hopefully also have noticed:

如您所见，在HEAD部分中明确定义了空间布局，然后定义了媒体格式以填充由区域ID定义的不同区域，尽管您无需为声音文件定义区域。希望您还会注意到：

that the XHTML syntax is used to close all tags,
XHTML语法用于关闭所有标签，
the use of ‘dur’ attributes, and
使用“ dur”属性，以及
the use of the <seq> and <par> tags.
<seq>和<par>标记的使用。

The dur Tag

dur标签

The dur tag stands for duration, allowing you to specify the number of seconds for which you want your media to be visible or audible. You should specify this as a numerical value, followed by s for seconds. Or, if you want your file to be displayed permanently, you can use the attribute indefinite.

dur标签代表持续时间，允许您指定希望媒体可见或可听见的秒数。您应将其指定为数字值，然后输入s表示秒。或者，如果您希望文件永久显示，则可以使用属性indefinite 。

The <seq> and <par> Tags

<seq>和<par>标记

The <seq> and <par> tags stand for ‘sequential’ and ‘parallel’ respectively, and concern themselves with ordering your files at playback.

<seq>和<par>标记分别代表“顺序”和“并行”，并关心在播放时对文件进行排序。

Having a <seq> tag at the beginning of your BODY section instructs the viewer to play back everything contained in the tag sequentially, so that one file will play until it finishes, after which the next will start. Using the <par> tag does the opposite — it instructs all files contained within it to play at the same time.

在BODY部分的开头有一个<seq>标记，指示查看者按顺序播放该标记中包含的所有内容，以便一个文件播放直到完成，然后开始下一个文件。使用<par>标记执行相反的操作-指示其中包含的所有文件同时播放。

However, SMIL gives you the ability to nest these tags, which allows you greater flexibility in controlling events. The way I’ve placed the <seq> and <par> tags in the example above means that an image will show concurrently with an audio file that plays for 4 seconds. Then, a second image will display, accompanied by a sound file, for 4 seconds. Finally an image will appear on its own for 4 seconds. So this will be a presentation of 12 seconds total duration, using 5 different files for a period of 4 seconds each.

但是，SMIL使您能够嵌套这些标签，这使您可以更灵活地控制事件。在上面的示例中，放置<seq>和<par>标记的方式意味着图像将与播放4秒的音频文件同时显示。然后，将显示第二个图像并伴有声音文件，持续4秒钟。最终，图像将单独出现4秒钟。因此，这将是一个总持续时间为12秒的演示，使用5个不同的文件，每个文件持续4秒。

模块化架构 (A Modular Architecture)

SMIL’s architecture is modular. It boasts a total of 45 different modules relating to various kinds of functionality, which are grouped into these functional areas:

SMIL的体系结构是模块化的。它拥有与各种功能相关的总共45个不同的模块，这些模块分为以下功能区域：

Structure
结构体
Meta information
元信息
Layout
布局
Timing
定时
Media Objects
媒体对象
Linking
连结中
Content control
内容控制
Animation
动画
Transitions
转场
Time Manipulations
时间操纵

This modular structure allows software manufacturers to include some or all modules in their products as required — and allows standards initiatives to do the same. Hopefully you can appreciate the power of such a simple concept.

这种模块化结构允许软件制造商根据需要在其产品中包括一些或所有模块，并且允许标准计划做到这一点。希望您能体会到这种简单概念的力量。

SMILHTML功能 (SMIL’s HTML Features)

SMIL also incorporates many basic HTML features such as:

SMIL还集成了许多基本HTML功能，例如：

Linking

连结中

<a show="new" href="index2.smi">

  <img src="image.gif" region="reg1" dur="indefinite" /> 

</a>

Text

文本

<text src="text1.txt" region="reg1" dur="10s" />

That’s it! You are now ready to create! All you need is Notepad, a viewer to display your creation, and to save your files in the *.smi format. Happy Integrating!

而已！现在就可以创建了！您只需要记事本，一个查看器即可显示您的创作，并以* .smi格式保存文件。整合愉快！