HTML学习笔记之第七章：HTML多媒体

前言：关于本章节的内容，并非全部是个人原创，只是在学习中的总结笔记。难免有与其他学习网站或者博客相同之处，如有类同，各位大神莫怪!!!此资料只是用来学习和工作的参考，并不作为商业用途。希望与大家一起分享，共同进步!!!

第七章：HTML多媒体

1.什么是多媒体？

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。

不同的浏览器以不同的方式处理对音效、动画和视频的支持。

某些元素能够以内联的方式处理，而某些则需要额外的插件。

2.多媒体格式

多媒体元素（比如视频和音频）存储于媒体文件中。

当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。

.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。

图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

3.视频格式

4.声音格式

使用哪种格式？

WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。

如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。

如果您的网址从事录制音乐，那么 MP3 是一个选项。

5. HTML Object 元素

<object> 的作用是支持 HTML 助手（插件）。

定义一个嵌入的对象。请使用此元素向您的HTML 页面添加多媒体。此元素允许您规定

插入HTML文档中的对象的数据和参数，以及可用来显示和操作数据的代码。

<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

（1）HTML 助手（插件）

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

例如：使用 QuickTime 来播放 MP4 视频

 属性说明：

（2）object param name的用法讲解

在 HTML 中，<param>标签没有结束标签。

param name标签是在这个播放插件中嵌入的一些功能和播放参数: 

<param name="playcount"value="1">

<!--控制重复次数: “x”为几重复播放几次; x=0，无限循环。--> 

<param name="autostart" value="0">

<!--控制播放方式: x=1，打开网页自动播放; x=0，按播放键播放。--> 

 

<param name="clicktoplay"value="1">

<!--控制播放开关: x=1，可鼠标点击控制播放或暂停状态; x=0，禁用此功能。--> 

 

<param name="displaysize"value="0">

<!--控制播放画面: x=0，原始大小; x=1，一半大小; x=2，2倍大小。--> 

 

<param name="enablefullscreen controls"value="1">

<!--控制切换全屏: x=1，允许切换为全屏; x=0，禁用此功能。--> 

 

<param name="showaudiocontrols" value="1">

<!--控制音量: x=1，允许调节音量; x=0，禁止音量调节。--> 

 

<param name="enablecontextmenu" value="1">

<!--控制快捷菜单: x=1，允许使用右键菜单; x=0，禁用右键菜单。--> 

 

<param name="showdisplay" value="1">

<!--控制版权信息: x=1，显示电影及作者信息;x=0，不显示相关信息--> 

 

<param NAME="AutoStart"VALUE="-1">

<!--是否自动播放--> 

 

<param NAME="Balance"VALUE="0">

<!--调整左右声道平衡,同上面旧播放器代码--> 

<param name="enabled"value="-1">

<!--播放器是否可人为控制--> 

 

<paramNAME="EnableContextMenu" VALUE="-1">

<!--是否启用上下文菜单--> 

 

<param NAME="url"VALUE="http://1.wma">

<!--播放的文件地址-->

 

<param NAME="PlayCount"VALUE="1">

<!--播放次数控制,为整数--> 

 

<param name="rate"value="1">

<!--播放速率控制,1为正常,允许小数,1.0-2.0--> 

 

<param name="currentPosition"value="0">

<!--控件设置:当前位置--> 

 

<param name="currentMarker"value="0">

<!--控件设置:当前标记--> 

 

<param name="defaultFrame"value="">

<!--显示默认框架--> 

 

<param name="invokeURLs"value="0">

<!--脚本命令设置:是否调用URL--> 

 

<param name="baseURL"value="">

<!--脚本命令设置:被调用的URL--> 

 

<param name="stretchToFit"value="0">

<!--是否按比例伸展--> 

 

<param name="volume"value="50">

<!--默认声音大小0%-100%,50则为50%--> 

 

<param name="mute"value="0">

<!--是否静音-->

 

<param name="uiMode" value="mini">

<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->

 

<param name="windowlessVideo" value="0">

<!--如果是0可以允许全屏,否则只能在窗口中查看--> 

 

<param name="fullScreen" value="0">

<!--开始播放是否自动全屏--> 

 

<param name="enableErrorDialogs" value="-1">

<!--是否启用错误提示报告--> 

 

<param name="SAMIStyle" value>

<!--SAMI样式--> 

 

<param name="SAMIFilename" value>

<!--字幕ID-->

6.HTML音频

HTML中播放声音的方法有很多种。

（1）使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。

可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用<embed>元素（HTML5 标签）

使用 <object> 元素

（2）使用HTML5 <audio>元素

实例：最好的HTML解决方法

说明：上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg

来播放音频。如果失败，代码将回退尝试 <embed> 元素。

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

（3）向网站添加音频的最简单方法

雅虎的媒体播放器绝对算其中之一。

它能播放mp3以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面

转变为专业的播放列表。

说明：<script> 标签用于定义客户端脚本，比如JavaScript。

必选的属性

可选的属性

7.HTML视频

 在HTML中播放视频的方法有很多种。

（1）使用 <embed> 标签

（2）使用 <object> 标签

（3）使用<video> 标签

<video> 标签是HTML5的新标签。是在HTML页面中嵌入视频元素。

8.设置滚动效果

（1）滚动标记<marquee>…</marquee>

（HTML跑马灯）使用marquee标记不仅可以移动文字，也可以移动图片，表格等。

（2）属性：

 滚动方向direction（包括4个值：up、down、left和right）。默认是向左滚动。

 语法：<marquee direction="滚动方向">...</marquee>

 

 滚动方式behavior（scroll:循环滚动，默认效果；slide:只滚动一次就停止； alternate:来回交替进行滚动）

 语法：<marqueebehavior="滚动方式">...</marquee>

 

 滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

 语法：<marquee scrollamount="5">...</marquee>

 

 滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

 语法：<marquee scrolldelay="100">...</marquee>

 

 滚动循环loop（默认值是-1，滚动会不断的循环下去）使用loop设置循环的的次数。

 语法：<marquee loop="2">...</marquee>

      

 width和height属性的作用决定滚动文字在页面中的矩形范围大小。

 语法：<marquee width="宽度"height="高度">...</marquee>

 

 bgcolor属性

 文字滚动范围的背景颜色，参数值是16进制（形式：#AABBCC或#AA5566等）或预定义的颜色名字

（如red、yellow、blue等）。

 语法：<marquee behavior=="slide"direction="left" bgcolor="red">

 我的背景色是红色的</marquee>

 hspace和vspace属性

 这两个属性决定滚动矩形区域距周围的空白区域.

 语法：<marquee width="300"height="30" vspace="10" hspace="10"bgcolor="red">

 我矩形边缘水平和垂直距周围各10像素。</marquee>

 <marqueewidth="300" height="30" vspace="50"hspace="50" bgcolor="red">

 我矩形边缘水平和垂直距周围各50像素。</marquee>