HTML5多媒体
- 多媒体来自多种不同的格式。
- 它可以是文字、图片、音乐、音效、录音、电影、电话等等。
- 在因特网上，你会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
多媒体格式
- 多媒体元素(比如视频和音频)存储于媒体文件中。
- 确定媒体类型的最常用的方法是查看文件扩展名。
- 多媒体元素也有多种不同扩展名的文件格式，例如.swf、.wmv、.mp3以及.mp4。
视频文件格式
- MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
- 常见格式有avi、wmv、mpg、mpeg、mov、rm、ram、swf、flv、mp4。
音频文件格式
mid、midi、rm、ram、wav、wma、mp3、mpga
使用哪种格式？
- WAVE 是因特网上最受欢迎的无压缩声音格式,所有流行的浏览器都支持它。如果您需要未经压缩的声音(音乐或演讲),那么您应该使用 WAVE 格式。
- MP3是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐,那么MP3 是一个选项。
HTML5视频与音频
- 大多数商业网站都喜欢采用视频来宣传自己的公司或推销自己的产品或服务。然而在HTML4.01 版本基础之前,只能通过相关插件(比如 Flash)来播放,而且所有浏览器不一定都有同样的插件,还需要安装其他插件才能实现。
- HTML5 提供了video 标记和audio 标记,很好地解决这一问题。
- 直到现在,仍然不存在一项旨在网页上显示视频的标准。
video 标记及属性
-
HTML5 规定了一种通过video 元素来包含视频的标准方法。
-
Video 标记支持三种视频格式：
- Ogg:带有Theora视频编码和Vorbis音频编码的Ogg文件。
- MPEG4:带有H.264视频编码和AAC音频编码的MPEG4文件。
- WebM:带有VP8视频编码和Vorbis音频编码的WebM文件。
-
基本语法：
<video src="movie.ogg" width="320" height="240" controls="controls"> 您的浏览器不支持video标记。 </video> -
<video>标签的属性
属性 值 描述 autoplay autoplay 若有该属性，则视频在就绪后马上播放。 preload preload 若有该属性，则视频在页面加载时进行加载，并预备播放。若有autoplay时则忽略该属性。该属性有3种值：auto->页面加载后开始加载音频/视频；metadata->当页面加载后仅加载音频/视频的元数据；non页面加载后不加载音频/视频。 controls controls 若有该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 width pixels 设置视频播放器的宽度。 loop loop 若有该属性，则当媒介文件完成播放后再次开始播放。 src url 要播放的视频URL。 -
poster属性：用于在视频下载时显示的图像（海报图片），或者在用户点击播放按钮前显示的图像。
- 赋值方法：poster=“url”
- 如果未设置该属性，则使用视频的第一帧来代替。
- 如果浏览器不支持<video>标记，就在<video>与</video>标记之间插入相关提示信息。
- video标记支持多个source标记：可以使用source 标记为video 标记和audio 标记提供多个不同的音频、视频文件，以解决浏览器支持。
- 如果浏览器支持将使用第一个可识别的格式。
- IE8或者更早的IE版本不支持video 标记。
-
示例代码：
<vido width="320" height="240" controls=“controls”> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持video标记。 </video> -
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频标记的应用</title> </head> <body> <fieldset style="text-align:center;float:left;"> <legend>src属性提供视频文件</legend> <video src="movie.ogg" poster="url" loop autoplay width="320" height="240" controls="controls"> 您的浏览器不支持 video标记。 </video> </fieldset> <fieldset style="text-align:center;float:left;"> <legend>source标记提供不同的视频文件</legend> <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持 video标记。 </video> </fieldset> </body> </html>
-
HTML5 Video+DOM
-
HTML5 <video> 元素同样拥有方法、属性和事件。
-
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中
的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。 -
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>video标记的使用及事件处理</title> </head> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> </body> </html>
- 案例分析：案例中调用了两个方法：play() 和 pause()。使用了两个属性：paused 和 width。
HTML5 提供了播放音频的标准
- Web 上的音频
- 直到现在，仍然不存在一项旨在网页上播放音频的标准。
- 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
- HTML5 规定了一种通过audio元素来包含音频的标准方法。
- audio 元素支持三种音频格式：ogg、mp3、wav
- <audio>标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 若有该属性，则音频在就绪后马上播放。 |
| preload | preload | 若有该属性，则音频在页面加载时进行加载，并预备播放。若有autoplay时则忽略该属性。该属性有3种值：auto->页面加载后开始加载音频/视频；metadata->当页面加载后仅加载音频/视频的元数据；non页面加载后不加载音频/视频。 |
| loop | loop | 若有该属性，则当音频播放完成播放后再次开始播放。 |
| controls | controls | 若有该属性，则向用户显示控件，比如播放按钮。 |
| src | url | 要播放的音频URL。 |
audio 标记及属性
-
HTML5 使用audio 标记能够播放声音文件或者音频流。同样可以使用source 标记给audio 标记提供不同格式的音频文件，浏览器将使用第一个支持的音频文件。
<audio width="320" height="240" controls="controls"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 video标记。 </ audio > -
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频标记的应用</title> <script type="text/javascript" src="html5shiv.js"></script> </head> <body> <fieldset style="text-align:center;float:left;"> <legend>src属性提供音频文件</legend> <!-- Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。 --> <!-- 要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。 --> <audio src="horse.ogg" controls="controls" loop autoplay> 您的浏览器不支持 audio标记（元素）。 </audio> </fieldset> <fieldset style="text-align:center;float:left;"> <legend>source标记提供不同的音频文件</legend> <!-- video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。 浏览器将使用第一个可识别的格式 --> <audio controls="controls"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio标记（元素）。 </audio> </fieldset> </body> </html>
HTML代码约定
-
请始终保持您的样式：
- 智能、
- 整洁、
- 纯净、
- 格式良好
-
使用正确的文档类型：
-
请始终在文档的首行声明文档类型：
<!DOCTYPE html>
-
-
使用小写元素名：
- HTML5 允许在元素名中使用混合大小写字母。但是这个习惯不好。
- 我们推荐使用小写元素名：
- 开发者习惯使用小写名。
- 小写更起来更纯净。
- 小写更易书写。
-
关闭所有 HTML 元素：
-
在 HTML5 中，您不必关闭所有元素，例如<p>元素。
-
但是我们建议关闭所有 HTML 元素。
-
关闭空的 HTML 元素：
-
在 HTML5 中，关闭空元素是可选的。
<meta charset="utf-8"> -
建议使用下面方式：
<meta charset="utf-8" />斜杠/在XHTML和XML中是必须的。若期望XML软件来访问您的网页，保持这个习惯是好主意。
-
-
-
使用小写属性名：
- HTML5 允许大小写混合的属性名。
- 我们建议使用小写属性名：
- 混合属性名并不好。
- 开发者习惯于使用小写属性名(比如在 XHTML 中)。
- 小写属性名看情况更纯净。
- 小写属性名更易书写。
-
属性值加引号：
- HTML5 允许不加引号的属性值。
- 我们推荐属性值加引号：
- 如果属性值包含值，则必须使用引号。
- 混合样式绝对不好。
- 加引号的值更易阅读。
-
必需的属性：
- 请始终对图像使用alt属性。当图像无法显示时该属性很重要。
- 请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在浏览器加载之前为图像预留空间。
-
空格和等号：
- 等号两边的空格是合法的。
- 但精简空格更易阅读。
-
空行和缩进：
- 请勿毫无理由地增加空行。
- 为了提高可读性，请增加空行来分隔大型或逻辑代码块。
- 为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。
- 请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素：
-
省略 <html>和<body>？
- 在 HTML5 标准中，能够省略<html>标签和<body>标签。
- 我们不推荐省略<html>和<body>标签。
-
省略<head>？
- 在HTML5标准中，<head>标签也能够被省略。
- 默认地，浏览器会把<body>之前的所有元素添加到默认的<head>元素。
- 通过省略<head>标签，您能够降低 HTML 的复杂性。
-
元数据：
- <title>元素在 HTML5中是必需的。请尽可能制作有意义的标题。
- 为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：
-
HTML注释：
- 短注释应该在单行中书写，并在<!-- 之后加一个空格，在 -->之前增加一个空格。
- 跨越多行的长注释，<!--和 -->都应该单独写一行。
-
样式表：
-
使用简单的语法来链接样式表(type属性不是必需的)：
<link rel=“stylesheet” href="styles.css"> -
短规则可以压缩为一行：
pinto {font-family:"verdana";font-size:16em;} -
长规则应该分为多行：
body { background-color:lightgrey; font-family:"Arial Black",Helvetica,sans-serif; font-size:16em; color:black; } -
开括号与选择器位于同一行。
-
在开括号之前用一个空格。
-
使用两个字符的缩进。
-
在每个属性与其值之间使用冒号加一个空格。
-
在每个逗号或分号之后使用空格。
-
在每个属性值对（包括最后一个）之后使用分号。
-
只在值包含空格时使用引号来包围值。
-
把闭括号放在新的一行，之前不用空格。
-
避免每行超过 80 个字符。
-
-
在 HTML 中加载 JavaScript：
-
使用简单的语法来加载外部脚本(type属性不是必需的)：
<script src="myscript.js">
-
-
通过 JavaScript 访问 HTML 元素：
- 请在HTML中使用与JavaScript相同的命名约定。
-
使用小写文件名：
- 大多数web服务器(pache、Unix)对文件名的大小写敏感：
- 不能以 london.jpg 访问 London.jpg。
- 其他web服务器(微软，IIS)对大小写不敏感：
- 能够以 london.jpg 或 London.jpg 访问 London.jpg。
- 如果使用混合大小写，那么您必须保持高度的一致性。
- 如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。
- 为了避免这些问题，请始终使用小写文件名(如果可以的话)。
- 大多数web服务器(pache、Unix)对文件名的大小写敏感：
-
文件扩展名：
- HTML文件名应该使用扩展名.html (而不是 .htm)。
- CSS文件应该使用扩展名.css。
- JavaScript 文件应该使用扩展名.js。