第5章 网页中的多媒体

HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第15页
<embed> 元素
<embed>也是HTML5中的新增元素，这是一 个行内标记，可以播放音频、视频和Flash动画 等多媒体文件，其用法与前面介绍的<audio>和 <video>元素类似。
<embed>标签定义了一个容器，用来嵌入外部应 用或者互动程序(插件)。前面播放音频和视频的 例子也可以使用<embed>来完成，相应的代码如 下：
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第2页
本章的学习目标
了解常见的图片格式
掌握<img>元素的使用方法
了解图像映射的创建和使用
掌握<audio>元素的使用方法
掌握<video>元素的使用方法
掌握<embed>元素的使用方法
了解在网页中嵌入腾讯视频的方法
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第12页
<audio>元素
如果不确定浏览器支持的音频格式，则 可以不使用src属性，而使用多个source元 素链接不同的音频文件，浏览器将使用第 一个支持的音频文件。
source元素用来为媒体元素(如<video>和 <audio>)定义媒体资源，通过src属性指定 媒体文件的URL，使用type指定媒体资源 的MIME类型。
<iframe>元素自身与视频没有任何关系。 <iframe>元素，也叫“内联框架”(inline frame)，是一个特殊的元素，它可以使用 src属性在一个网页中嵌入另一个网页。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第18页Байду номын сангаас
主要内容
5.1 向网页中添加图片 5.2 为网页添加音频及视频 5.3 绘制图形 5.4 本章小结 5.5 思考和练习
(1) 在页面中添加canvas元素，必须定义canvas 元素的id属性值，以便在JavaScript脚本这调用
(2) 在JavaScript脚本中通过id找到canvas元素 (3) 通过canvas元素的getContext方法获取其上
下文，即创建Context对象，获取可绘制图形的 2D环境 (4) 使用Context对象的方法进行图形绘制
第5章 网页中的多媒体
第4页
5.1 向网页中添加图片
一图抵千言，图片是网页中不可缺少的元 素。在网页中巧妙地使用图片，可以使网 页图文并茂，大大增强网页的视觉效果， 令网页更加生动多彩。
图片的格式有很多种，Web上大多数的静 态图片都是“点阵图像”(bitmapped images)。点阵图像将图片分解到由像素组 成的网格中，并分别为每个像素指定色彩 。
视频空间会在页面加载时保留。如果没有设置这
些属性，浏览器不知道大小的视频，浏览器就不
会在加载时保留特定的空间，页面会根据原始视
频的大小而改变。另外，在<video>与</video>
标签之间插入的内容被提供给不支持video元素
的浏览器显示。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第14页
video元素
video元素拥有和audio元素类似的方法、 属性和事件。video元素的方法、属性和事 件也可以使用JavaScript进行控制。其中 ，video元素的方法用于播放、暂停以及加 载等控制；属性用于读取或设置视频的时 长、音量等。可以通过DOM事件通知 video元素开始播放、已暂停、已停止等。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第10页
5.2 为网页添加音频及视频
Web上的多媒体应用经历了重大改进，从 最初简单的MIDI和GIF动画，发展到现在随 处可见的MP3音乐、Flash动画和各种在线 视频，同时也产生了用于播放多媒体内容 的各种工具和插件，如Windows Media Player、Flash Player、Real Player等。 HTML 5为多媒体播放新增了两个重要元素 ——audio和video
第5章 网页中的多媒体
第17页
在页面中嵌入腾讯视频
<iframe
src="http://v.qq.com/iframe/player.html
?vid=z0027hcc6iu" allowfullscreen=""
frameborder="0" height="375"
width="500"></iframe>
实际上，canvas只是一块无色透明的区域，只是
一个JavaScript API，需要通过JavaScript编写
绘制图形的脚本。JavaScript将在本书第10章详
细介绍，本节用到的JavaScript脚本比较简单，
读者只要理解其功能会仿照使用即可。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第7页
将图片转换为链接
将图片转换为链接很简单。相比于将文本置于开 标签<a>和闭标签</a>之间，图片链接只需要将 <img>元素放置于这些标签内即可。例如，将【 例5-1】中的logo图片链接到一个企业网站，可以 这样修改代码：
►<a href="http://www.queeng.com"> ► <img src="images/logo.png" alt="一凡科技"
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第6页
使用<img>添加图片
<img>是一个独立标签，因此没有结束标签</img>。该元 素必须包含两个属性：src和alt。src属性用来指明图片 来源，其值是一个URL，可以是绝对URL，也可以是相对 URL；alt属性是一段对图片进行描述的文本，如果浏览 器无法显示图片，该文本内容将代替显示。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第11页
<audio>元素
在HTML5之前，大多数音频是通过插件(如 Flash)来播放的。然而，并非所有浏览器都拥有 同样的插件。因此，HTML5规定了在网页上嵌入 音频元素的标准，即使用audio元素。
<audio> 标签定义声音，比如音乐或其他音频流 。目前，<audio>元素支持3种文件格式：MP3、 Wav、Ogg。可以在<audio>和</audio>之间放 置文本，当浏览器不支持<audio>标签时将显示 这些文本信息。
第5章 网页中的多媒体
第20页
使用canvas元素
canvas元素能够在网页中创建一块矩形区域，这块矩形 区域称为画布，在其中可以绘制各种图形
在HTML页面中添加canvas元素的方法和添加其他的元素 一样，例如下面的代码创建了一个宽400像素、高300像 素的canvas对象。：
► <canvas id="canvas1" width="400" height="300">该浏览器 不支持HTML5的画布标记！</canvas>
https://v.qq.com/x/cover/1wbx6hb4d3icse8/z0 027hcc6iu.html
在这个地址中我们需要的是该页的文件名 “z0027hcc6iu.html”，其中z0027hcc6iu是该 视频的vid，稍候会用到。
HTML+CSS+JavaScript网页设计
canvas元素本身并不能实现图形绘制功能，绘制图形的 工作需要由JavaScript来完成。使用JavaScript可以在 canvas元素内部添加线条、图片和文字，也可以在其中 绘画，还能够加入高级动画。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第21页
使用canvas元素绘制图形的步骤
除此之外，还常用到height与width属性，用来指定图片 的高度与宽度。这两个属性的值通常以像素为单位，也可 以是百分比。指定图片的显示高度和宽度有利于使页面更 快、更平滑地得到加载，因为浏览器会知道应该为图片分 配多大的空间，因此它可以在图片还在载入的同时准确地 渲染页面的其他部分。
HTML+CSS+JavaScript网页设计
理解canvas元素的工作原理
掌握使用canvas元素绘制图形/图像的方法
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第3页
主要内容
5.1 向网页中添加图片 5.2 为网页添加音频及视频 5.3 绘制图形 5.4 本章小结 5.5 思考和练习
HTML+CSS+JavaScript网页设计
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第13页
video元素
video元素的使用格式和audio元素的使用格式非
常相似，也是通过source元素来组织视频文件资
源。video元素提供播放、暂停和音量控件来控
制视频，同时提供width和height属性来控制视
频的尺寸。如果设置了高度和宽度，那儿所需的
第5章 网页中的多媒体
本章概述 本章的学习目标 主要内容
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第1页
本章概述
“超文本”就是指页面内可以包含图片、 声音、动画等非文字元素。网页中的多媒 体有多种不同的格式。本章将学习如何在 网页中添加图片、动画、音频、视频等元 素，以及如何使用canvas元素在网页中绘 制各种图形、图像等。
►area元素用于定义图像映射中的区域，当用户单击这 个区域时即可链接到指定的页面。area元素永远嵌套 在map元素内部，通过shape属性指定所选区域的形 状，然后使用coords属性指定区域的坐标。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第9页
主要内容
5.1 向网页中添加图片 5.2 为网页添加音频及视频 5.3 绘制图形 5.4 本章小结 5.5 思考和练习
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第19页
5.3 绘制图形
HTML 5新增了一个绘图接口——canvas元素， 通过这个接口，用户可以在Web中绘制图形。绘 制图形时，首先在页面上放置一个canvas元素， 就相当于在页面上放置了一块画布，可以在这块
画布中进行图形绘制，但并不是用鼠标画图。本 节就来介绍如何使用canvas元素绘制各种图形。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第22页
CanvasRenderingContext2D对象
►<embed src="sound.mp3" >
如果播放的是视频文件，还可以使用width和
height属性指定视频窗口的大小。 HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第16页
在页面中嵌入腾讯视频
首先，打开腾讯视频网站首页，选择“电视剧” ，在“热剧精选”中就有《如懿传》，如果没有 可以通过搜索找到，然后进入该剧的首页，在剧 集列表中单击“01”即可开始在线观看，此时浏 览器地址栏中即为该集的播放地址：
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第5页
图片格式
浏览器通常支持3种常见的点阵图像格式，而且大 多数图像处理软件也以这些格式保存图片：GIF 、JPEG和PNG。
在实际应用中，如果需要在网站中包含很多巨大 且复杂的高分辨率图片，一种推荐做法是在页面 初次加载时向用户提供图片的缩小版本，并添加 指向大图的链接。这些缩小版本的图片被称作“ 缩略图(thumbnails)”。一般在相册或包含总结 信息的页面中都使用这种做法。
height ="41" width="120" >
►</a>
这样，图片就变成了一个超链接，单击图片将跳
转到指定的URL。
HTML+CSS+JavaScript网页设计
第5章 网页中的多媒体
第8页
创建图像映射
创建图像映射用到了<map>和<area>两个元素：
►map元素用于定义客户端图像映射。图像映射指带有 可单击区域的一幅图像，<img>中的usemap属性可引 用<map>中的id或name属性(取决于浏览器)，所以， 创建图像映射时，应同时向<map>添加id和name属性 。