HTML5超级链接、图片与多媒体

￡神魔★判官ぃ 2022-10-29 08:00 256阅读 0赞

### **HTML5超级链接、图片与多媒体** ###

**网页超级链接**

超级链接（hyperlink）也简称为链接（link），是网站的重要组成部分，HTML正是因为有了超级链接才显得与众不同。超级链接使得浏览者可以在众多网页之间跳转和返回。可以使用<a>标签的name 或 id 属性，创建一个文档内部的书签，也就是说，可以创建指向文档片段的链接。超链接的目标对象类型有很多，不但可以链接到各种类型（如图片文件、声音文件、视频文件、word等）的文件，还可以链接到网页内的特定内容、其他网站、ftp服务器等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。

在HTML文件中，超级链接使用<a>…</a>标签（标签也称为标记、元素）组来实现，语法结构及相关说明如下所示。

基本语法格式：

说明

（1）<a>标签是双标签，链接的内容放在<a>和</a>之间。链接内容可以是文字、图片、音频或视频文件等。

（2）href属性是<a>标记的必要属性，不可缺省，用于设置链接所指向的目标地址，目标地址通过href属性的值“url”来表示。

（3）url：资源地址，指的是链接所指向的文件的地址，其取值可以是本地地址或远程地址。

（4）target属性用于指定打开链接时的目标窗口，默认值是在原窗口中打开。其属性值及代表含义如下表所示：

<table style="width:424.75pt;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#2980b9;width:70.4pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">值</span></p> </td> 
   <td style="border-color:#2980b9;width:354.35pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">含义</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2980b9;width:70.4pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">_self</span></p> </td> 
   <td style="width:354.35pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">在当前窗口中打开目标文件，默认值</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2980b9;width:70.4pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">_blank</span></p> </td> 
   <td style="width:354.35pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">在新窗口中打开目标文件</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2980b9;width:70.4pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">_top</span></p> </td> 
   <td style="width:354.35pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">在整个浏览器窗口打开链接（忽略任何框架）</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2980b9;width:70.4pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">_parent</span></p> </td> 
   <td style="width:354.35pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">在当前窗口的上一级窗口打开，一般在框架中使用</span></p> </td> 
  </tr> 
 </tbody> 
</table>

（5）title属性对超级链接起到提示或说明作用。浏览器打开网页后，当鼠标悬停在链接上方时会出现提示性文字，文字内容由title属性值指定，往往用来提示该链接指向的内容是什么。

**例、**

<!DOCTYPE html>
    <html>
        <head>
          <meta charset="utf-8">
          <title>网站链接测试</title>
       </head>
       <body>
         <h3><center>中文门户网站</center></h3>
         <a href="https://www.ifeng.com" target="_self" title="打开凤凰网">凤凰</a> <br/>
         <a href="https://www.huanqiu.com/" target="_self" title="打开环球网">环球网</a>
      </body>
    </html>

由于指定了target="\_self"，所以每一个网站被打开时都是在原窗口中打开，同时原窗口中之前的网页数据将会从内存中卸载，被目标网页所取代。

保存为文件名LinkDemoA.html，用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

使用<a>标签的name 或 id 属性，可以创建一个文档内部的书签——创建指向文档片段的链接——锚链接。

下面是创建指向文档片段的链接（锚链接）的例子，源码如下：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>指向文档片段的链接（锚链接）的例子</title>
    </head>
    <body >
    <h1>文学鉴赏</h1>
    <h3><a href="#第一篇" >春江花月夜</a> <h3>
    <h3><a href="#第二篇" >再别康桥</a> <h3>
    <hr>
    <h3><a name="第一篇" >春江花月夜</a></h3><br>
    ——张若虚 〔唐代〕<br>
    春江潮水连海平，海上明月共潮生。<br>
    滟滟随波千万里，何处春江无月明！<br>
    江流宛转绕芳甸，月照花林皆似霰。<br>
    空里流霜不觉飞，汀上白沙看不见。<br>
    江天一色无纤尘，皎皎空中孤月轮。<br>
    江畔何人初见月？江月何年初照人？<br>
    人生代代无穷已，江月年年望相似。(望相似 一作：只相似)<br>
    不知江月待何人，但见长江送流水。<br>
    白云一片去悠悠，青枫浦上不胜愁。<br>
    谁家今夜扁舟子？何处相思明月楼？<br>
    可怜楼上月徘徊，应照离人妆镜台。(徘徊 一作：裴回)<br>
    玉户帘中卷不去，捣衣砧上拂还来。<br>
    此时相望不相闻，愿逐月华流照君。<br>
    鸿雁长飞光不度，鱼龙潜跃水成文。<br>
    昨夜闲潭梦落花，可怜春半不还家。<br>
    江水流春去欲尽，江潭落月复西斜。<br>
    斜月沉沉藏海雾，碣石潇湘无限路。<br>
    不知乘月几人归，落月摇情满江树。(落月 一作：落花)
    <br><br>
    【简说】全诗共三十六句，每四句一换韵，通篇融诗情、画意、哲理为一体。全诗紧扣春、江、花、月、夜的背景来写，而又以月为主体。“月”是诗中情景兼融之物，它跳动着诗人的脉搏，在全诗中犹如一条生命纽带，通贯上下，触处生神，诗情随着月轮的生落而起伏曲折。<br>
    在句式上，大量使用排比句、对偶句和流水对，起承转合皆妙，文章气韵无穷。诗中春、江、花、月、夜、人几个主题词错落重叠，伸缩变化，把读者引进了一个目眩五彩、浑然忘我的境界。
    <br><br>
    <h3><a name="第二篇" >再别康桥</a></h3><br>
    ——徐志摩<br>
    轻轻的我走了，正如我轻轻的来； <br>
    我轻轻的招手，作别西天的云彩。 <br>
    那河畔的金柳，是夕阳中的新娘； <br>
    波光里的艳影，在我的心头荡漾。 <br>
    软泥上的青荇，油油的在水底招摇； <br>
    在康河的柔波里，我甘心做一条水草！ <br>
    那榆荫下的一潭，不是清泉，是天上虹； <br>
    揉碎在浮藻间，沉淀着彩虹似的梦。 <br>
    寻梦？撑一支长篙，向青草更青处漫溯； <br>
    满载一船星辉，在星辉斑斓里放歌。 <br>
    但我不能放歌，悄悄是别离的笙箫； <br>
    夏虫也为我沉默，沉默是今晚的康桥！ <br>
    悄悄的我走了，正如我悄悄的来； <br>
    我挥一挥衣袖，不带走一片云彩。 <br>
    【简说】“诗中有画，画中有诗”。全诗共七节，每节四行，每行两到三个节拍，节奏非常鲜明；每节二四行押韵，而目每节都自然换韵，读来抑场顿挫，朗朗上口；整齐中富于变化，使全诗充满了错落有致的美感！诗的每一节都可以称得上是一幅述人的图画<br><br>
    </body>
    </html>

保存文件名为**LinkDemoB.html**，用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

Windows中的**目录**（也称为文件夹）

一个典型的文件系统可以达到有组织的存储文件的目的。一个“目录”或“文件夹”就是一个装有数字文件系统的虚拟“容器”。在它里面保存着多个文件和其它一些目录（文件夹）。在一个目录（文件夹）中的另一个目录（文件夹）被称作它的子目录（子文件夹）。类似如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

Windows中的**路径**

用户在磁盘上寻找文件时，所历经的文件夹线路叫路径。路径分为绝对路径和相对路径。

**绝对路径**：是从盘符开始的路径，形如d:\\AA\\BB\\my.html

**相对路径**：是从当前目录（即用户正在使用的目录）开始的路径，如当前目录为C:\\AA

要描述上述路径，只需输入BB\\my.html。

实际上，严格的相对路径写法应为**.**\\BB\\my.html其中，**.**(点)表示当前路径，在通常情况下可以省略，只有在特殊的情况下不能省略。

. 表示当前目录

与Windows中的路径类似，HTML中也有两种形式的路径，绝对路径和相对路径，不同的路径用在不同的链接中。如果要链接站外的文件，则需要使用绝对路径；如果要链接站内的文件，一般在实现超级链接功能时，必须要指定href属性的值，也就是目标文件的路径。网站中（或站外）每一个文件都有一个独一无二的地址，称之为URL（Uniform Resource Locator），即统一资源定位符，通过URL建立当前文件到目标文件的链接。

1.绝对路径

绝对路径是指目标文件的完整路径，路径中需包含完整的传输协议名称、主机名称、目录名称以及文件名称，一般用于对站外的文件的链接。常见的绝对路径形式如下所示。

注意：如果对站内的文件做链接，一般不使用绝对路径，这样做有很大弊端，当网站发生移植时（比如站点文件夹从D盘移植到E盘），访问该链接时就会出错。因此，在设置超级链接路径时，只要当链接的目标文件在站外时，才可以使用绝对路径；当目标文件在站内时，不要使用绝对路径描述超级链接。

2.相对路径

相对路径是指从当前文件为起点到目标文件的路径，相对路径中省略掉了当前文件和目标文件的共同路径部分。

在HTML中，超级链接分为内部链接、外部链接和书签链接（也称锚点链接）三种。

1.内部链接

内部链接是指当前文件与目标文件都在同一网站内，在建立超级链接时要使用相对路径。

（1）如果当前文件（例如source.html）与目标文件（例如targ.html）在同一个目录下，设置超级链接时按照如下格式进行：

（2）如果当前文件（例如source.html）要链接到站点下一级目录中的目标文件（例如targ.html），设置超级链接时按照如下格式进行：

（3）如果当前文件（例如source.html）要链接到站点中上一级目录中的目标文件（例如targ.html），设置超级链接时按照如下格式进行：

2.外部链接

外部链接是指由网站内的文件链接到站外的目标文件，这种链接一般都采用绝对路径，常用的外部链接格式有：

（1）<a href=" http://www.sohu.com">内容</a>

（2）<a href="http://www.imut.edu.cn/ies/index.html">内容</a>

（3）<a href="ftp://219.225.31.201 ">内容</a>

（4）<a href="mailto://abc@xx.com">内容</a>

其中，（3）用来链接外部的文件服务器；（4）用来实现E-mail链接。

3.书签链接

书签链接可以理解为点到点的链接，可以实现从同一个文件的某个点到另一个目标点，也可以实现从一个文件的某个点到另一个文件的目标点，这个目标点叫做书签（也称为锚点），因此书签链接也叫做锚点链接。

书签链接基本语法

书签链接是从文件中的某个点到书签的链接，设置步骤分为两步：

第一步：建立书签。

第二步：为书签制作链接。

语法说明

name属性用来指定书签名，该书签名会在书签链接处进行引用，引用时需在书签名前面加“\#”。

注意：如果要在不同页面间建立书签链接，则书签链接的链接应设置为：

图片超级链接

基本语法

说明

（1）href属性用来指定超级链接目标文件的URL。

（2）src属性用来指定图像URL。

（3）<img>标签要嵌套在<a>标签内部，图片的大小可以通过CSS来设置。

完整示例代码如下：

<!DOCTYPE html>
      <html >
         <head>
            <meta charset="utf-8">
            <title>图像链接</title>
         </head>
         <body>
              <h3><center>图像链接<center></h3>
              <hr color="#666666">
              <a href="https://www.baidu.com/">
              <img src="test1.png" alt="百度一下" width="50" height="50"></a>
         </body>
      </html>

保存为文件名DemoA.html（在此，我将该网页文件和test1.png图片文件放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

点击其中的图标，将打开百度一下链接。

文件超级链接

灵活使超级链接可以实现文件下载

下载是指将网站所在的服务器上的文件复制到本地机器上来。在HTML超级链接中，如果链接的目标文件是浏览器解释不了的文件（如word文档、excel文档、zip文档等），那么该目标文件不会被打开显示，而是变成文件下载。

例如：

上述链接其实就是一个普通的内部链接，只不过链接的文件是.docx类型的word文件，浏览器打不开该文件所以单击该链接时启动下载对话框。

完整示例代码如下：

<!DOCTYPE html>
    <html >
         <head>
            <meta charset="utf-8">
            <title>通知下载</title>
         </head>
         <body>
              <h3><center>通知链接<center></h3>
              <hr color="#666666">
             <a href="通知.docx">最新通知</a>
         </body>
      </html>

保存为文件名DemoB.html（在此，我将该网页文件和“通知.docx”文件放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

点击其中的“最新通知”链接，将下载“通知.docx”文件。

**网页图片**

常见图片格式简介

☆PNG(Portable Network Graphic Format)：即可移植的网络图像文件格式。是Web图像中最通用的格式。采用无损压缩技术。PNG格式最多可以支持32位颜色，不支持动画图。

☆JPEG(Joint Photo Graphic Experts Group): 联合图片专家组格式，最大可支持32位彩色。采用有损图片压缩技术。有两种文件扩展名：“.jpg”和“.jpeg” 。

☆GIF(Graphics Interchange Format)：即图片交换格式，最高支持8位彩色，分为GIF87a和GIF89a两种类型，其中GIF89a支持“透明”、“交错”、“动画”三个特性。

☆BMP(Windows Bitmap)：即位图文件格式。BMP格式使用的是索引色彩，可以使用16M色彩渲染图像。此格式一般用在多媒体演示和视频输出等情况下。

在HTML网页中可使用<img>标记插入图片。基本语法格式：

说明

<img>标签是单个标记，作用是在网页中插入图片。

图片样式由img标记的属性决定。

src和alt是必选属性，其它属性为可选属性

img标记属性名、值及说明

<table style="width:417.7pt;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>属性</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;"><strong>值</strong></p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;"><strong>说明</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>alt</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">text</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">规定图片的替代文本</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>src</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">URL</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">规定显示图片的URL</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>name</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">text</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">规定图片的名称</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>height</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">pixels, %</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">定义图片的高度</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>width</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">pixels, %</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">设置图片的宽度</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>align</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">top | middle | bottom | left | center | right</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">设置文本中的图片的对齐方式</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>border</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">pixels</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">定义图片周围的边框</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>hspace</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">pixels</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">定义图片左侧和右侧的空白</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>vspace</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;">pixels</p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;">定义图片顶部和底部的空白</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:104pt;"> <p style="margin-left:0cm;"><strong>usemap</strong></p> </td> 
   <td style="width:143.6pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">URL</span></p> </td> 
   <td style="width:6cm;"> <p style="margin-left:0cm;"><span style="color:#000000;">将图片定义为客户端图片影视</span></p> </td> 
  </tr> 
 </tbody> 
</table>

当图片无法正确显示，可以使用<img>标记的alt属性设置图片的替代文本。

基本语法

说明

alt属性的替代文本可以是中文的，也可以是英文的。

img标记的width和height属性是用来设置图片的宽度和高度的。默认情况下，网页中的图片大小就是由图片原来的宽度和高度决定的。

基本语法

说明

图片宽度和高度值可以是像素，也可以是百分比

可以只设置宽度和高度中的其中之一，另一个属性将按原图片宽高等比例显示。

img标记的border属性可以为图片设置边框。

基本语法

< img src="图片地址"border="value">

说明

value为边框线的宽度，用数字表示，单位为像素

边框的颜色不可以调整的。

**例**、预先准备一张名为test1.png图片，网页代码如下：

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>图片测试1</title>
     </head>
     <body>
            <img src="test1.png" style="width: 400px;height: 300px">
    </body>
     </html>

保存为文件名ImgDemoA.html（在此，我将该网页文件和test1.png图片文件放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

**网页多媒体**

音频、视频文件的使用的标签（标签也称为标记、元素）：

audio：HTML5提供的标签作用是播放音频。

video：HTML5提供的标签作用是播放视频。

<audio> 标签属性：  
src：音乐的URL  
preload：预加载  
autoplay：自动播放  
loop：循环播放  
controls：浏览器自带的控制条  
例  
<audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>

<video> 标签属性：  
src：视频的URL  
poster：视频封面，没有播放时显示的图片  
preload：预加载  
autoplay：自动播放  
loop：循环播放  
controls：浏览器自带的控制条  
width：视频宽度  
height：视频高度  
例  
<video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>

vedio和audio的使用技巧基本相同，在此主要以vedio来示例。

【常用的音频、视频文件格式

在HTML5中嵌入的音频格式主要包括ogg、mp3、wav等，具体介绍如下：

ogg:当ogg文件只封装音频编码时，它就会变成为一个音频文件。ogg音频文件扩展名为ogg。ogg音频格式类似于mp3音频格式，不同的是，ogg格式完全免费并且没有专利限制。同等条件下，ogg格式音频文件的音质、体积大小优于mp3音频格式。

mp3:目前主流的音频格式，其音频文件扩展名为mp3。同mpeg4视频格式一样，mp3音频格式也存在专利、版权等诸多的限制，但因为各大硬件提供商的支持使得mp3依靠其丰富的资源、良好的兼容性仍旧保持较高的使用率。

wav:微软公司( Microsoft)开发的一种声音文件格式，其扩展名为wav。作为无损压缩的音频格式，wav的音质是三种音频格式文件中最好的，但其体积也是最大的。wav音频格式最大的优势是被 Windows平台及其应用程序广泛支持，是标准的Windows文件。

在HTML5中嵌入的视频格式主要包括ogg、mpeg4、wehm等，具体介绍如下：

ogg:一种开源的视频封装容器，其视频文件扩展名为ogg，里面可以封装vobris音频编码或者 theora视频编码，同时ogg文件也能将音频编码和视频编码进行混合封装。

mpeg4：目前最流行的视频格式，其视频文件扩展名为mp4。同等条件下，mpeg4格式的视频质量较好，但它的专利被MPEG-LA公司控制，任何支持播放mpeg4视频的设备，都必须有一张MPEG-LA颁发的许可证。目前MPEG-LA规定，只要是互联网上免费播放的视频，均可以无偿获得使用许可证。

Webm：由Google发布的一个开放、免费的媒体文件格式，其视频文件扩展名为webm。由于webm格式的视频质量和mpeg4较为接近，并且没有专利限制等问题，webm已经被越来越多的人所使用。】

例、预先准备一个视频文件movie.mp4，网页文件代码如下：

<!DOCTYPE html>
    <html >
         <head>
            <meta charset="utf-8">
            <title>视频测试</title>
         </head>
         <body>
              <h3><center>视频播放测试<center></h3>
              <hr color="#666666">
              <video width="320" height="240" controls autoplay>
                     <source src="movie.mp4" type="video/mp4">
              </video>
         </body>
      </html>

保存为文件名DemoD.html（在此，我将该网页文件和视频文件movie.mp4放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6][]

下面介绍使用脚本 JavaScript 控制媒体

HTML5为我们提供了3种比较常用的方法

<table style="width:347.3pt;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;width:134.3pt;"> <p style="margin-left:0cm;">方法</p> </td> 
   <td style="border-color:#000000;width:213pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">描述</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:134.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">media.paly()</span></p> </td> 
   <td style="width:213pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">媒体文件播放</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:134.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">media.pause()</span></p> </td> 
   <td style="width:213pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">暂停</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:134.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">media.load()</span></p> </td> 
   <td style="width:213pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">重新加载媒体文件</span></p> </td> 
  </tr> 
 </tbody> 
</table>

多媒体常用事件

video 元素的一些常用事件

- progress：用于更新媒体的下载进度，会周期性触发。

- canplaythrough：当整个媒体顺利播放时会触发的事件。

- canplay：不考虑整体状态，只要下载了一定的可放帧就会触发的事件。

- ended：媒体到达末尾时触发。

- pause：媒体暂停时触发。

- play：媒体开始播放时触发。

- error：媒体播放出现错误时触发。

在利用video元素或audio元素读取或播放媒体数据时，会触发一系列的事件。如果使用javascript脚本捕获事件，就可以对这些事件处理，常常需要利用 addEventListener 方法，其格式为：

VideoElement.addEventListener(type,listener,useCaptrue)

其中，VideoElement表示页面的video或audio元素;type表示事件名称,listener表示绑定的函数，useCaptrue是一个布尔值，表示事件的响应顺序,该值如果是true，浏览器采用captrue响应方式,如果为false，浏览器采用budding响应方式，默认情况为false。

使用脚本 JavaScript 控制 audio的例子，预先准备一个视频文件movie.mp4，网页文件代码如下：

<!DOCTYPE html>
    <html >
         <head>
            <meta charset="utf-8"> 
            <title>视频测试</title>
         </head>
         <body>
              <h3><center>视频播放测试<center></h3>
              <hr color="#666666">
             <div style="text-align:center"> 
                  <video id="video1" width="420">
                      <source src="movie.mp4" type="video/mp4">
                  </video>
                  <br> 
                  <button onclick="playPause()">播放/暂停</button> 
                  <button onclick="makeBig()">放大</button>
                  <button onclick="makeSmall()">缩小</button>
                  <button onclick="makeNormal()">普通</button>
                  <br>
             </div> 
              <script> 
              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>

保存为文件名DemoE.html（在此，我将该网页文件和视频文件movie.mp4放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7][]

最后，介绍如何用**打开**窗口播放本地的媒体文件

首先提示，处于安全的需要JavaScript不能直接用**打开**窗口访问本地资源文件，那怎么办呢？下面介绍一种方法。在页面中插入一个input节点并指定type为file，如果需要播放多个文件，可以添加属性multiple。注册文件节点被更新时的回调函数，在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url，然后把该url设置为audio或video的src值即可。

下面给出网页用**打开**窗口播放本地视频文件的示例，源码如下：

<!DOCTYPE html>
    <html >
    <head>
           <meta charset="utf-8"> 
           <title>播放本地的视频文件</title>
    </head>
    <body>
    <h3><center>视频播放测试<center></h3>
    <hr color="#666666">
    <input type="file" id="file" onchange="onInputFileChange()">
    <br/>
    <video id="video_id"  width="320" height="240" controls autoplay loop>你的浏览器不能支持HTML5视频</video>
    <script>
    function onInputFileChange() {
          var file = document.getElementById('file').files[0];
          var url = URL.createObjectURL(file);
          console.log(url);
          document.getElementById("video_id").src = url;
    }
    </script>
    </body>
    </html>

保存为文件名DemoF.html（在此，我将该网页文件放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8][]

上面对网页多媒体介绍是以视频为例介绍，下面给出播放音频文件的示例——一个网页用**打开**窗口播放本地音频文件的示例，源码如下：

<!DOCTYPE html>
    <html >
    <head>
           <meta charset="utf-8"> 
           <title>播放本地的音频文件</title>
    </head>
    <body>
    <h3><center>本地的音频播放测试<center></h3>
    <hr color="#666666">
    <input type="file" id="file" onchange="onInputFileChange()">
    <br/>
    <audio id="audio_id"  controls autoplay loop>你的浏览器不能支持HTML5音频 </audio>
    <script>
    function onInputFileChange() {
          var file = document.getElementById('file').files[0];
          var url = URL.createObjectURL(file);
          console.log(url);
          document.getElementById("audio_id").src = url;
    }
    </script>
    </body>
    </html>

保存为文件名DemoG.html（在此，我将该网页文件放在目录中D:\\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 9][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221024/e38b9b12acee40ed9071824e73b3ea78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221024/44409935e13444e9b29102b2acb08be1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: /images/20221024/f8c8356a602e447886385e9e687630e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: /images/20221024/4ae91b07a1994abd9c90123f10d05819.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: /images/20221024/85b524cc9a5840d09260df227ca59647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: /images/20221024/3c18f3252612434da21d27afbc294fa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6]: /images/20221024/48ca26ba55374d06b46412586735f8bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7]: /images/20221024/fc9800ffd3b54247a123f22a4b5138ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8]: /images/20221024/ab59cd9b86d64f819aac7f61850cdd78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 9]: /images/20221024/5b6f31071f444d589c84502602479e3e.png