《HTML5与CSS3基础教程》第十七章学习笔记 视频、音频和其他多媒体

第17章 视频、音频和其他多媒体

17.2 视频文件格式

• HTML5支持三种视频文件格式（即编解码器）：
  • Ogg Theora使用的文件扩展名为.ogg或.ogv
  • MP4(H.254)使用的文件扩展名为.mp4或.m4v
  • WebM使用的文件扩展名为webm
• 编解码器：使用压缩算法对数据的数字流进行编码和解码，使之更适合播放的计算机程序。编解码器的目标是保证音频和视频所能达到的最高质量的情况下减小文件尺寸。
• 设置MIME类型：MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。
• 转化文件格式：将视频资源转换为其他文件格式，可用下列两种工具
  • Miro Video Conveter
  • HandBrake

提示：开发者至少需要为视频提供两种格式(MP4和WebM)，才能确保获得所有兼容HTML5浏览器的支持

17.3 在网页中添加单个视频

• video属性

src（源）	指定视频文件的URL
autoplay（自动播放）	当视频可以播放时立即开始播放
muted（静音）	让视频静音
loop（循环）	让视频循环
poster（海报）	指定视频加载时要显示的图像，接受所需图像文件URL
width（宽度）	视频的宽度（以像素为单位），通常默认为300
height（长度）	视频的高度（以像素为单位），通常默认为150
preload（预加载）	告诉浏览器要加载的视频内容的多少，可以是以下三个值:
	none表示不加载任何视频
	metadata表示仅加载视频的元数据（如长度、尺寸等）
	auto表示让浏览器决定怎么做（这是默认设置）

17.4 为视频添加控件和自动播放

1.为视频添加控件

...
<video src="my-video.ext" controls></video>
...

2.为视频添加自动播放

...
<video src="my-video.ext" autoplay></video>
...

controls、autoplay都是布尔类型的属性

17.5 为视频指定循环播放和海报图像

1.设置自动播放和循环播放

...
<video src="paddle-steamer.webm" width="369" height="208" autoplay loop></video>
...

2.指定海报图像

...
 <video src="paddle-steamer.webm" width="369" height="208"
 poster="paddle-steamer-poster.jpg" controls></video>
...

17.6 阻止视频预加载

如果认为用户观看视频的可能性比较低（如该视频并不是页面的主要内容），那么可以不预先加载该视频，可用proload="none"

17.7 使用多种来源的视频和备用文本

<video width="300" height="800" proload="none"  controls>
			<source src="E:\Codes\《HTML5与CSS基础教程》\Chapter17\demo_exercise.mp4"  type="video/mp4">
			<source src="E:\Codes\《HTML5与CSS基础教程》\Chapter17\demo_exercise.webm"  type="video/webm">
			<p><a href="E:\Codes\《HTML5与CSS基础教程》\Chapter17\demo_exercise.mp4"  type="video/mp4">Download the video</a></p>
			<!-- 当浏览器都不支持mp4和webm格式时，会显示<p>文本提供的下载链接来看 -->
		</video>

17.9 音频文件格式

编解码器	文件扩展名
Ogg Vorbis	.ogg
MP3	.mp3
WAV	.wav
ACC	.acc
MP4	.mp4
Opus	.opus

17.10 在网页中添加带空间的单个音频文件

<audio src="E:\Codes\《HTML5与CSS基础教程》\Chapter17\《我的一个道姑朋友》.mp3" controls></audio>