HTML5多媒体应用的技巧

HTML5多媒体应用的技巧，希望对大家有所帮助！

1..加入音乐有两种标识：

<video>可以显示图像

<audio>只有声音

语法如下：

·src="music.mp3"：设置音乐文件名及路径， <audio>标记支持MP3、WAV及OGG 3种音乐格式；

·autoplay:是否自动播放音乐。

语法为：<audio src="music.ogg" autoplay></audio>

·controls:是否显示播放面板。

·loop:是否循环播放。

·preload:是否预先加载,减少用户等待时间。属性值有auto、metadata及none3种。当设置autoplay属性

时，preload属性就会被忽略。

* auto:网页打开时就加载影音。

* metadata:只加载meta信息。

* none:网页打开时不加载影音。

·width/height:设置播放面板的宽度和高度，单位为像素。

·type="audio/mpeg":指定播放类型，不需要让浏览器去检验文件格式，type必须指定适当的MIME类型。

语法为：<audio controls="controls">

</audio>

2.添加影音动画

<video>其属性大致与<audio>相同。支持MP4、WEBM(VP8编码)、OGG（Theora编码）语法如下：

3.Flash动画是矢量格式，文件小并不失真。

在网页中播放的格式是.swf文件，在网页中加入Flash动画可利用<embed>标记，语法如下：

4.使用iframe嵌入优酷视频

其中的设置属性为：

·src="new_page.htm" ：显示在窗格中的文件路径及文件名；

·name ="f1"：框架窗格名称；

·width="300"/height="400"

·seamless:隐藏边框及滚动条，让网页看不出来嵌入了iframe框架；

如果想嵌入视频，则src改成视频网址即可。

切图 qietu(.com)

传统的技术相比，HTML5 的语法特征更加明显，可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

HTML5 的优势

1. 解决了跨浏览器问题

在 HTML5 之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到的页面效果也不同。在 HTML5 中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式 IE 浏览器，只需简单地添加 JavaScript 代码就可以使用新的元素。

2. 新增了多个新特性

HTML 语言从 1.0 到 5.0 经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。 HTML5 新增的特性如下。

新的语义标签，比如 header、nav、section、article、footer。
新的表单元素，比如 calendar、date、time、email、url、search。
用于绘画的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
对本地离线存储的更好支持。
地理位置、拖曳、摄像头等 API。

3. 用户优先的原则

HTML5 标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强 HTML5 的使用体验，还加强了以下两方面的设计。

安全机制的设计

为确保 HTML5 的安全，在设计 HTML5 时做了很多针对安全的设计。HTML5 引入了一种新的基于来源的安全模型，该模型不仅易用，而且对不同的 API（Application Programming Interface ，应用程序编程接口）都通用。使用这个安全模型，不需要借助于任何不安全的 hack 就能跨域进行安全对话。

表现和内容分离

表现和内容分离是 HTML5 设计中的另一个重要内容。实际上，表现和内容的分离早在 HTML4.0 中就有设计，但是分离得并不彻底。为了避免可访问性差、代码复杂度高、文件过大等问题，HTML5 有了更加明晰的规范。但是考虑到 HTML5 的兼容性问题，一些陈旧的内容还是可以兼容使用的。

4. 化繁为简的优势

作为当下流行的通用标记语言，HTML5 尽可能地简化，严格遵循了简单至上的原则，主要体现在这几个方面：

简化的字符集声明;
简化的 DOCTYPE;
简单而强大的 HTML5 API;
以浏览器原生能力替代复杂的 JavaScript 代码。

从新增的标签来看，HTML5 有以下几个特点：

HTML5 的文档类型可以简写为 <!DOCTYPE html>。
HTML5 的字符编码可以简写为 <meta charset=“utf-8”/>。
标签不分大小写，但实际开发中，建议所有标签都使用小写。
允许属性值不加引号。
允许部分属性值可以省略。

随着 HTML 的不断发展，其经历了“从 HTML4 的宽松到 XHTML 的严格再到 HTML5 宽松”的发展路程。

相比较 HTML4 和 XHTML 的结构标签而言，HTML5 对结构标签进行了较大简化，精简了声明部分标签的定义过程，使得结构标签更加的简洁。

语义化标签

在引入语义化标签之前，我们常常采用 DIV + CSS 来布局，这样的布局方式使得文档的结构不清晰。为了解决这个问题，在 HTML5 中新增了一些标签，来帮助我们更清晰地展现文档的结构。

所谓语义化标签就是一看标签名，我们就知道该标签里内容的作用。

语义标签的优点：

在样式丢失的情况下，页面也能呈现出很好地内容结构、代码结构。
比 <div> 标签有更加丰富的含义，方便开发与维护。
有利于 SEO，提高搜索引擎的有效爬取。
方便其他设备解析（如移动设备）。

在我们的课程中会给大家讲解如下所示的语义化标签：

header 标签
nav 标签
section 标签
article 标签
aside 标签
footer 标签

图像地图是带有可点击区域的图像，通常情况下，每个区域是一个相关的超级链接。点击某个区域，就会到达相关的链接，也可以通过图像地图实现图片切换效果。

1 什么是图像地图

把一幅图像分成为多个区域，每个区域指向不同的URL地址。例如，将一幅中国地图的图像按照省市划分为若干个区域，这些区域就被称为热点，单击热点区域，就可以连接到与相应的省市有关的页面，这就是图像地图。

2 怎么制作

1．首先必须定义出图像上的各个热点区域的形状，位置坐标，及指向的URL地址等信息，这个过程叫做图像热点映射。图像热点映射需要使用<map name=mapname></map>标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。

2．图像热点映射中的各个区域用<area>标签说明，<area>标签的格式为：<area shape=”形状”cords=”坐标”href=”URL”>，href部分也可以用nohref替换，表示在该区域单击鼠标无效。<area>标签还可以有一个target属性，用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。<area>标签的属性及描述如表1所示。

3．定义好了图像热点之后，接着就要在<img>图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在<map>标签中的name属性设置值前多加一个“#”字符。例如，<img src=”china.jpg”usemap=”#mymap”>。

表1 <area>标签的属性及描述

在线咨询

上一篇：碎片时间学编程「112]：转义 HTML
下一篇：布局升级秘籍：掌握CSS Grid网格布局，打造响应式网页设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5多媒体应用的技巧

HTML5 的优势

语义化标签

您的项目需求