HTML5与CSS3基础教程-第17章视频、音频和其他多媒体

关注

原创最新推荐文章于 2026-04-21 12:16:47 发布 498 阅读 AI 写同款· GEO 优化 ›

css进阶四（多媒体嵌入）文章目录前言一、视频音频嵌入技术概述1、视频格式2、音频格式二、在HTML5中嵌入视频1、基本语法格式2、浏览器对视频格式的兼容性3、举例三、在HTML5中嵌入音频1、基本语法格式2、浏览器对音频格式的兼容性3、举例四、其他属性前言在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为阅读详情

《HTML5与CSS3基础教程（第8版）》第17章读书笔记

2020/04/05
数字版权管理（DRM）： H5并没有提供任何保护媒体内容的方法。因此，如果很在意对媒体文件的保护，不要使用H5的原生多媒体。（p350）

H5视频

（p350 - 358）

格式： H5支持3种视频文件格式：（p350 - 351）

格式	拓展名	浏览器支持
Ogg Theora	.ogv	Firefox 3.5+、Chrome 4+、Opera 10.5+、Android Firefox
MP4（H.264）	.mp4, .m4v	Safari 3.2+、Chrome 4-？、IE9+、IOS Safari、 Android2.1+、Android Chrome/Firefox/Opera 11+
WebM	.webm	Firefox 4+、Chrome 6+、Opera 10.6+、Android2.3+、Android Chrome/Firefox/Opera 14

开发者至少需要为视频提供2中格式（MP4和WebM），才能确保获得所有兼容H5的浏览器支持。
如果用户的机器上面安装了WebM，那么WebM在IE9+或Safari中可以正常运行。

video元素加载视频：
```
<video src="vidoe-url"></video>
```

video元素属性： （p352）

属性	描述
src	指定视频文件的URL
autoplay	当视频可以播放时立即开始播放（自动播放）
controls	添加浏览器为视频设置的默认控件
muted	让视频静音
loop	让视频循环播放
poster	指定视频加载时要显示的图像。接受所需图像的URL
width	视频的宽度，通常默认为300px
height	视频的高度，通常默认为150px
preload	预加载，告诉浏览器要加载的视频内容的多少。可以取值none/metadata/auto（默认）

如果没有设置宽高，则浏览器会计算视频的尺寸，并在加载文件后根据尺寸显示视频。若设置的尺寸与视频不符，浏览器会对视频进行缩放，并尽可能保证质量。（p351）

如果没有指定controls属性，就不可以通过浏览器操控视频的播放，只能是默认的播放方法；若也没有设置autoplay和poster，则视频会停在第一帧且没有播放、暂停等按钮（即不能播放）若设置了autoplay和loop，没有control则不能停下视频。

不同浏览器的controls控件是不同的，见p353.（Firefox的控件显示的视频时长会比其他浏览器长1秒，音频也是）

如果没有设置poster属性， 视频加载时显示的图像则是视频的第一帧，设置后显示的是poster的url值的图片。

preload可以取3个值：

none：表示不加载任何视频（若认为用户观看视频的可能性比较低，或不是主页内容时，可以不预加载该视频，或使用metadata）；
metadata：表示仅加载视频元数据（如宽高、长度等）；
auto：默认值，表示让浏览器决定怎么做。

当video元素中没有浏览器可以识别/支持的源时， 可能会显示视频的控制条（如果设置了controls属性），或者显示空白矩形区域（大多数情况），或显示海报（如果设置了poster属性）。

使用多种来源的视频和备用文本： （p356 - 358）

之前一个video元素只能包含一个视频源，当为了视频多种浏览器时，就需要指定不同格式的视频，并为不支持H5原生视频的浏览器准备备用文本（如视频下载链接等）。就可以只用<source>元素：
```
<video controls>
	<source src="video-1-url" type="video/mp4">
    <source src="video-2-url" type="video/webm">
    
    <p>
        <a href="video-1-url">Download video!</a>
    </p>
</video>
```
- video元素中不需要指定src属性。
- 浏览器发现video元素时， 首先会检查元素本身是否有src，若没有，则会逐个检查source元素，直到找到它可以播放的一个源，并忽略后面的源。不能识别video元素的浏览器会忽略上述，只加载可以认识的部分，比如备用文本（如果有的话）。

source的属性： （p357）

名称	描述
src	视频来源的url。
type	用于指定视频的类型，帮助浏览器决定它是否能够播放该视频。
media	用于为视频的来源指定CSS3查询，从而可以在不同尺寸屏幕下显示不同尺寸的视频。

提供可访问性： （p358）
- 原生多媒体可以更好地使用键盘进行控制。
- JS Media API可以更好的控制视频。
- H5还指定了一种新的文件格式WebVTT，用于包含文本字幕、标题、描述、篇章等视频内容。

H5音频

（p358 - 362）

格式： H5支持6种音频文件格式：（p350 - 351）

格式	拓展名	浏览器支持
Ogg Vorbis	.ogg	Firefox 3.5+、Chrome 5+、Opera 10.5+
MP3	.mp3	Safari 5+、Chrome 6+、IE9+、IOS
WAV	.wav	Firefox 3.6+、Chrome 8+、Safari 5+、Opera 10.5+
ACC	.acc	Safari 3+、IE9+、IOS3+、Android 2+
MP4	.mp4	Safari 3+、Chrome 5+、IE9+、IOS3+、Android 2+
Opus	.opus	Firefox

开发者至少需要为音频提供2中格式（Ogg Vorbis和MP3），才能确保获得所有兼容H5的浏览器支持。
MP4是一种视频编解码器，但是也可以仅对音频数据进行编码。
若使用单个Ogg编码，则可以省略controls，因为他默认包含控件。

audio元素加载音频：
```
<audio src="audio-url"></audio>
```
audio元素属性： （p360）

类似video属性，只是没有width, height, poster。
- 包含autoplay属性会覆盖preload属性的设置，因为只有加载音频文件才能播放；
- preload属性的值不会影响浏览器行为，它只影响请求。
提供带备用内容的多个视频源：

类似使用多种来源的视频和备用文本。（p361 - 362）

具有Flash的视频和音频

（p362 - 366）

使用MediaElement.js嵌入Flash：
1. 下载MediaElement.js并解压；
2. 将build文件夹内容复制到项目文件夹，并在html中引用里面的jquery.js, mediaelement-and-player.min.js, mediaelementplayer.min.css；
3. 像H5使用video, audio一样使用他们；
4. 添加js代码：
```
$('video', 'audio').mediaelementplayer();
```
- 添加上述代码后，无论使用什么浏览器、无论浏览器是否支持H5多媒体，视频的播放控件看起来都是一样的。
- 不支持H5元素多媒体的浏览器，只要用户安装了Flash，也可以播放多媒体文件。
- 其他的Flash播放器解决方案包括：
  - Video.js
  - JW Player（免费版有水印）
  - Flowplayer（免费版有水印）