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相似,它分为HEADBODY部分。 但是,此处的主要区别在于,演示文稿的基本空间布局是在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="data:image.gif" region="reg1" dur="4s" /> <audio id="aud1" src="audio.wav" dur="4s" /> </par> <par> <img id="img2" src="data: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="data: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格式保存文件。 整合愉快!

更多信息 (Further Information)

There are many players available, but a popular and widely-used option is Real One Player.

有很多可用的播放器,但是一个流行且广泛使用的选项是Real One Player 。

Be sure to check out a feature-by-feature demo of SMIL possibilities at http://www.realnetworks.com/resources/samples/smil.html

请务必在http://www.realnetworks.com/resources/samples/smil.html上查看 SMIL功能的逐项演示。

You can find more information and resources on the current (SMIL 2.0), and past recommendations at https://www.w3.org/AudioVideo

您可以在https://www.w3.org/AudioVideo上找到有关当前(SMIL 2.0)和过去建议的更多信息和资源。

翻译自: https://www.sitepoint.com/presentation-shoestring/

smil

smil_SMIL简介-鞋串上的多媒体演示相关推荐

  1. linux shell 宏定义_Linux系统和Shell命令行简介,走上数据分析之路

    122Linux系统和Shell命令行简介,走上数据分析之路 本节作者:刘永鑫 中国科学院遗传与发育生物学研究所 版本1.0.2,更新日期:2020年8月31日 本项目永久地址:https://git ...

  2. 为什么自己编写的页面总是在那里抖动_为什么小红书的简介添加不上 个性签名的修改方法...

    很多刚刚开通小红书的小可爱可能会迷惑,博主们的简介是怎么添加上去的?为什么自己小红书的简介添加不上?我们该怎么修改个性签名?别担心!掌握以下个性签名的修改方法,你也可以,跟着小编走,保你学会. 为什么 ...

  3. 122.Linux系统和Shell命令行简介,走上数据分析之路

    122Linux系统和Shell命令行简介,走上数据分析之路 本节作者:刘永鑫 中国科学院遗传与发育生物学研究所 版本1.0.2,更新日期:2020年8月31日 本项目永久地址:https://git ...

  4. 编译原理学习笔记:字母表上的运算(乘积、n次幂、正闭包、克林闭包)、串上的运算(连接、幂)

    1 字母表 2 字母表上的运算 3 串 4 串上的运算(连接) 5 串上的运算(幂)

  5. 干洗店软件,洗衣洗鞋线上下单小程序开发

    干洗店软件洗衣洗鞋线上下单小程序: 可以实现客户自助办理,也可以和公众号.小程序等结合起来.干洗店软件可以实现客户管理,如积分管理,产品设置等功能. 线上下单,上门取货,订单拍照,订阅提示,在干洗店软 ...

  6. GalHttprequest类库简介——android平台上的一个轻量级的http网络请求及缓存框架

    2019独角兽企业重金招聘Python工程师标准>>> GalHttprequest名字的由来 开发过iOS项目的朋友都应该知道 ASIHTTPRequest类库, ASIHTTPR ...

  7. python字符串与文本处理技巧(4): 格式化输出、令牌解析、串上串

    1. 以指定列宽格式化字符串 很多情况下,我们有一些长字符串,想以指定的列宽将它们重新格式化. textwarp() import textwrap import oss = "Look i ...

  8. redis系列之1----redis简介以及linux上的安装

    redis简介 redis是NoSQL(No Only SQL,非关系型数据库)的一种,NoSQL是以Key-Value的形式存储数据.当前主流的分布式缓存技术有redis,memcached,ssd ...

  9. [转载] Python简介、linux上Python及其IDE的安装和详细配置

    参考链接: Python id() 一.什么是Python? Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语 ...

最新文章

  1. Android.mk文件语法规范
  2. 【Kali渗透全方位实战】Aircrack-ng拿隔壁女神家的wifi密码
  3. Group by优化
  4. stm32正交编码器 原理图_恶劣环境下应用的电感式增量编码器和绝对编码器
  5. 6.Random Forests
  6. 【飞鸽传书】往往会说其应当具备可维护性
  7. 深入认识Tigase XMPP Server(上)
  8. linux搭建nfs
  9. Android自定义控件封装之自定义属性的实现
  10. 转: Protobuf 的 proto3 与 proto2 的区别
  11. 懂商业的技术合伙人(7):怎样快速开发一个APP(2)
  12. Proteus8.12无法仿真STC15系列单片机解决办法
  13. ModuleNotFoundError: No module named ‘keras.api‘解决
  14. L - Evenly Separated Strings
  15. #pragma comment 用法
  16. 图表Chart.js入门教程
  17. 5V降压1.8V芯片,稳压电路设计建议PW2059
  18. HTML网页设计期末课程大作业 :汽车网页——宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
  19. python中strip函数_python中strip()函数的理解
  20. Weisfeiler-Lehman(WL)算法测试图同构

热门文章

  1. 微信小程序详解——小程序的生命周期和页面的生命周期
  2. Mac OS 中Texstudio 无法找到 .sty文件
  3. mysql根据学号或是姓名查询_SQL学习之MySQL SQL查询作业答案
  4. Web安全——文件包含漏洞
  5. PLC控制系统的接地设计
  6. Android记录15--关于ListView中adapter调用notifyDataSetChanged无效的原因
  7. Delphi和Word编程集锦
  8. 递归、迭代和分治(1):递归
  9. ubuntu下开启/禁用笔记本触摸板
  10. 华为云服务器(Centos7)安装与卸载mysql8