《FFmpeg Basics》中文版-24-网页视频

写在前面

如果您对音视频技术感兴趣，可以订阅我的专题:音视频专辑
也可以关注我的账户： 张芳涛，我后期会发布更多的音视频以及图像处理方面的文章。

正文

由于其无所不在，互联网是用ffmpeg创建或编辑视频的最佳媒介。 除了上传到YouTube，Vimeo等流行的视频分享网站之外，了解如何将媒体文件包含到网页中也很有用。 为确保具有不同浏览器和媒体支持的用户可以收听并查看音频和视频，建议您为HTML5和Adobe Flash Player提供所有支持的格式的媒体文件。

主流的浏览器对HTML5的支持情况

使用HTML5在网络上添加媒体文件相对容易，并且有支持HTML5的设备，但不支持Flash Player，因此了解各种浏览器支持的媒体格式非常有用。 FFmpeg能够将您的音频和视频转换为任何指定的HTML5格式。 OGG容器格式的文件使用Theora视频编解码器和Vorbis音频编解码器，这些编解码器可以在商业项目中免费使用，WebM格式也提供相同的免费使用。 请注意，默认情况下，ffmpeg使用FLAC编解码器编码OGG音频，这些浏览器无法播放，必须包含-acodec libvorbis选项。

浏览器	MP3	OGG*	WAV
Apple Safari 5+	yes	no	yes
Firefox 3.6+	no	yes	yes
Google Chrome 6+	yes	yes	yes
Internet Explorer 9+	yes	no	no
Opera 10.6+	yes	yes	yes
Maxthon 3+	yes	yes	yes

浏览器	MP4	OGG	WEBM
Apple Safari 5+	yes	no	no
Firefox 3.6+	no	yes	yes
Google Chrome 6+	yes	yes	yes
Internet Explorer 9+	yes	no	no
Opera 10.6+	no	yes	yes
Maxthon 3+	yes	yes	yes
如果设置，则显示控件：播放，暂停，寻找，音量
对于Internet Explorer的HTML5支持可以从版本9获得，以前的版本6,7和8可以从中安装Google Chrome Frame插件

https://developers.google.com/chrome/chrome-frame
在线测试您的浏览器如何支持特定的位于网络上的HTML5功能
http://html5test.com

使用HTML5添加音频

为了在任何主流浏览器上播放我们的音频，最通用的格式是在除Firefox以外的所有浏览器上支持MP3，而对于Firefox我们提供OGG或WAV格式。 用于音频包含的HTML5中的新标签是表中描述的

属性	值	描述
autoplay	autoplay	如果设置，音频开始准备就绪时播放
controls	controls	如果设置，则显示控件：播放，暂停，寻找，音量
loop	loop	如果设置，音频播放一遍又一遍
preload	auto metadata none	auto - 整个音频文件被加载 metadata - 只加载元数据 none - 音频文件未与网页一起加载 不要将它与自动播放属性一起使用; 它最近在IE和Opera中不支持
src	URL	音频文件的绝对或相对URL

因为我们希望为同一个音频指定至少两个不同格式的文件，所以

标签（所有的属性都是可选的）

属性	值	描述
media	media_query	现在没有浏览器支持它，描述了媒体资源的类型
src	URL	音频文件的绝对或相对URL
type	MIME_type	最近媒体资源的MIME类型： audio:音频/ mpeg，音频/ ogg，音频/ wav video:视频/ mp4，视频/ ogg，视频/ webm

下一个HTML代码包括带有显示控件和循环的音频文件，它被保存到文本文件中，并与其他HTML元素（如文档类型，头，标题，正文，div等）一起调用audio.htm。

要开始自动播放，我们可以添加属性autoplay ='autoplay'。
各种浏览器中的音频控制

浏览器	音频播放器
Firefox 4
Google Chrome 6
Internet Explorer 9
Maxthon 3
Opera 12

使用HTML5添加视频

HTML5中的视频标签是一个

属性	值	描述
autoplay	autoplay	如果已设置，视频在准备就绪时开始播放
controls	controls	如果设置，则显示按钮控制：播放，暂停，寻找，音量，切换全屏，字幕等
height	像素	视频播放器的高度
loop	loop	如果设置，视频会一遍又一遍播放
muted	静音	如果设置，音频流静音，最近在Apple Safari和Internet Explorer中不支持
poster	URL	在视频下载期间显示的图像文件的URL（如果不存在）显示的是视频的第一帧
preload	auto metadata none	auto -整个音频文件被加载 metadata -只加载元数据 none - 音频文件未与网页一起加载 不要将它与自动播放属性一起使用; 现在它不适用于IE
src	URL	视频文件的绝对或相对URL

为了在所有主流浏览器上都能看到视频，我们必须提供至少2种不同的格式，最好的选择是MP4和WEBM。 因此，不会使用

例如，要包含带有显示控件和循环的视频文件，我们可以使用HTML代码：

为Flash Player添加视频

对于不支持HTML5的浏览器，我们可以在