第十七章 视频、音频及其他多媒体
前言
在页面上添加电影、声音、图像和动画可以增强访问者的体验。在 HTML5 出现之前，为网页添加多媒体的唯一办法就是使用第三方的插件（如 Adobe Flash Player 和苹果的 QuickTime）。通过引入原生的多媒体（浏览器负责一切），HTML5 改变了这一状况。并非所有支持 HTML5 的浏览器都支持相同格式的视频和音频格式。你将在本章学到如何提供多种格式（以及为不支持任何一种格式的浏览器提供备用 Flash），让不同的访问者都能正常使用。
17.1视频文件格式
HTML5 支持三种视频文件格式（即编解码器）。 Ogg Theora 使用的文件扩展名为 .ogg或 .ogv，支持它的浏览器包括 Firefox 3.5+、Chrome 4+、Opera 10.5+ 以 及Android 版 Firefox。 ‰ MP4（H.264）使用的文件扩展名为.mp4 或 .m4v，支持它的浏览器包括Safari 3.2+、Chrome 4-?、Internet Explorer 9+、iOS（MobileSafari） 和 Android 2.1+、Android 版Chrome、Android 版 Firefox 和 OperaMobile 11+。 ‰ WebM 使用的文件扩展名为 .webm，支 持 它 的 浏 览 器 包 括 Firefox 4+、Chrome 6+、Opera 10.6+、Android2.3+、Android 版 Chrome、Android 版Firefox 和 Opera Mobile 14。
什么是编解码器
编解码器是使用压缩算法对数据的数字流进行编码和解码，使之更适合播放的计算机程序。编解码器的目标通常是在保证音频和视频所能达到的最高质量的情况下减小文件尺寸。当然，不同编解码器的表现是不一致的。
17.2在网页中添加单个视频
要在 HTML5 网页中添加视频，需要使用新的 video 元素。这一过程再简单不过了。如果浏览器不能识别你指定的视频格式，就无法显示该视频。
1. 在网页中添加单个视频的步骤
(1) 获取视频资源。
(2) 输入<video src="my-video.ext"></video>，这里的 my-video.ext 是视频文件的位置、名称和扩展名。就这么简单！
2. video 属性
除了 src，还有哪些属性可以用在 video元素上呢？下表列出了这些属性。其中的某些属性为视频提供了很高的灵活性。
17.3为视频添加控件和自动播放
目前仅向你展示了在网页中添加视频的最简单的方法，访问者不能开始播放视频，因为播放器没有显示任何控件。
很容易就可以通过代码改变这种情况。controls 属性会告诉浏览器添加一套用于控制视频播放的控件。每个浏览器都有自己默认的控件，它们看起来都不一样。通常，只有用户点击播放按钮后，视频才会开始播放。可以添加 autoplay 属性，让视频自动播放。
...
<body>
<video src="paddle-steamer.webm"
➝ width="369" height="208" controls>
➝ </video>
</body>
</html>
添加单个 WebM 视频（这次是包含控件的）
...
<body>
<video src="paddle-steamer.webm"
➝ width="369" height="208" autoplay
➝ controls></video>
</body>
</html>
现在，video 元素有了表中的三个属性。由于有 autoplay，因此视频会自动播放。 由于有controls，访问者有了暂停按钮。这些属性出现的顺序无关紧要
1. 为视频添加控件
输入 <video src="my-video.ext" controls></video>，其中my-video.ext 指向你的视频文件。
2. 为视频添加自动播放
输入
<video src="my-video.ext" autoplay controls></video>
这里的 my-video.ext 指向你的视频文件
17.4为视频指定循环播放和海报图像
不仅可以将视频设为自动播放，还可以将它设为持续播放，直到停止。要实现循环播放，只需要使用 autoplay 和 loop 属性。如果不设置 autoplay 属性，通常浏览器会在视频加载时显示视频的第一帧。你可能想对此作出修改，指定你自己的图像。这可以通过海报图像实现。
...
<body>
<video src="paddle-steamer.webm"
➝ width="369" height="208" autoplay
➝ loop></video>
</body>
</html>
设置了自动播放和循环播放的单个WebM 视频。如果这里不设置 controls，访问者就无法停止视频！因此，如果将视频指定为循环，最好包含controls。即便如此，自动循环播放的视频也可能让访问者非常不爽
...
<body>
<video src="paddle-steamer.webm"
➝ width="369" height="208"
➝ poster="paddle-steamer-poster.jpg"
➝ controls></video>
</body>
</html>
指定了海报图像（当页面加载并显示视频时显示该图像）的单个 WebM 视频（含控件）
1. 为视频添加自动播放和循环播放
输入 <video src="my-video.ext" autoplay loop></video>，这里的 my-video.ext 指向你的视频文件。
2. 为视频指定海报图像
输入
<video src="my-video.ext" controls
poster="my-poster.jpg"></video>
其中，myvideo.ext 指向你的视频文件，my-poster.jpg是想用做海报图像的图像。
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
