这个系列文章我们来介绍一位海外工程师如何探索 FFmpeg Basics 音视频技术，对于想要开始学习音视频技术的朋友，这些文章是份不错的入门资料，这是第 24 篇：FFmpeg 网络视频。
—— 来自公众号“关键帧Keyframe”的分享
学习和提升音视频开发技术，推荐你加入我们的知识星球：【关键帧的音视频开发圈】，加入后你就能：
- 下载 30+ 个开箱即用的「音视频及渲染 Demo 源代码」
- 下载包含 500+ 知识条目的完整版「音视频知识图谱」
- 下载包含 200+ 题目的完整版「音视频面试题集锦」
- 技术和职业发展咨询 100% 得到回答
- 获得简历优化建议和大厂内推
由于互联网的普及，它是创建或编辑视频使用 FFmpeg 的最佳媒介。除了上传到像 YouTube 和 Vimeo 这样的流行视频分享网站，了解如何将媒体文件嵌入网页也很有用。为了确保不同浏览器和媒体支持的用户能够收听和查看音频和视频，建议提供所有 HTML5 和 Adobe Flash Player 支持的格式的媒体文件。
1、主流浏览器的 HTML5 支持
使用 HTML5 将媒体文件添加到网页相对简单，并且存在支持 HTML5 但不支持 Flash Player 的设备。因此，了解各种浏览器支持的媒体格式非常有用。FFmpeg 可以将您的音频和视频转换为您指定的任何 HTML5 格式。OGG 容器格式文件使用 Theora 视频编解码器和 Vorbis 音频编解码器，可以在商业项目中免费使用。WebM 格式也提供相同的免费使用。请注意，默认情况下，FFmpeg 使用 FLAC 编解码器对 OGG 音频进行编码，这些浏览器无法播放，必须包含 -acodec libvorbis选项。
| 浏览器 | MP3 | OGG* | WAV |
|---|---|---|---|
| Apple Safari 5+ | 是 | 否 | 是 |
| Firefox 3.6+ | 否 | 是 | 是 |
| Google Chrome 6+ | 是 | 是 | 是 |
| Internet Explorer 9+ | 是 | 否 | 否 |
| Opera 10.6+ | 是 | 是 | 是 |
| Maxthon 3+ | 是 | 是 | 是 |
| 浏览器 | MP4 | OGG | WEBM |
|---|---|---|---|
| Apple Safari 5+ | 是 | 否 | 否 |
| Firefox 3.6+ | 否 | 是 | 是 |
| Google Chrome 6+ | 是 | 是 | 是 |
| Internet Explorer 9+ | 是 | 否 | 否 |
| Opera 10.6+ | 否 | 是 | 是 |
| Maxthon 3+ | 是 | 是 | 是 |
| 如果设置，将显示控件：播放、暂停、寻找、音量 | |||
| HTML5 支持从 Internet Explorer 9 版本开始，之前版本 6、7 和 8 可以安装 Google Chrome Frame 插件 |
https://developers.google.com/chrome/chrome-frame
在网页上测试您的浏览器如何支持特定的 HTML5 功能
http://html5test.com
2、使用 HTML5 添加音频
为了在任何主流浏览器上播放我们的音频，最通用的格式是 MP3，除了 Firefox 之外的所有浏览器都支持它，为此我们为 Firefox 提供 OGG 或 WAV 格式。新的 HTML5 音频包含标签是 <audio>标签，如下表所述：
<audio>标签（所有属性都是可选的）
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果设置，音频在开始缓冲时开始播放 |
| controls | controls | 如果设置，显示控件：播放、暂停、寻找、音量 |
| loop | loop | 如果设置，音频重复播放 |
| preload | auto metadata none | auto – 整个音频文件被加载 metadata – 仅加载元数据 none – 音频文件不与网页一起加载 不要与 autoplay 属性一起使用；不支持 IE 和 Opera |
| src | URL | 音频文件的绝对或相对 URL |
由于我们希望为同一音频指定至少两种不同格式的文件，因此不使用 <audio>标签的 src属性，而是在 <audio>标签的开头和结尾之间添加多个 <source>标签。浏览器将扫描包含的媒体文件并选择第一个可以播放的文件。
<source>标签（所有属性都是可选的）
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 目前尚未被任何浏览器支持；描述媒体资源的类型 |
| src | URL | 音频文件的绝对或相对 URL |
| type | MIME_type | 媒体资源的 MIME 类型： 音频：audio/mpeg, audio/ogg, audio/wav 视频：video/mp4, video/ogg, video/webm |
以下 HTML 代码包含一个带有控件和循环播放的音频文件，保存到文本文件中，并与其他 HTML 元素（如文档类型、头部、标题、主体、div 等）一起调用，在 audio.htm文件中：
<audio controls='controls' loop='loop'>
<source src='music.mp3' type='audio/mpeg' />
<source src='music.ogg' type='audio/ogg' />
Audio 元素在您的浏览器中不支持，请更新。
</audio>要开始自动播放，我们可以添加属性 autoplay='autoplay'。
各种浏览器中的音频控件：
3、使用 HTML5 添加视频
HTML5 中的视频标签是 <video>标签，其属性如 autoplay、controls、loop 和 muted 使用等于属性名称的值（例如，loop='loop'）。对于生产使用，我们可以使用 <video autoplay controls loop>。
<video>标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果设置，视频在开始缓冲时开始播放 |
| controls | controls | 如果设置，显示控制按钮：播放、暂停、寻找、音量、切换全屏、字幕等 |
| height | 像素 | 视频播放器的高度 |
| loop | loop | 如果设置，视频重复播放 |
| muted | muted | 如果设置，音频流被静音；不支持 Apple Safari 和 Internet Explorer |
| poster | URL | 视频下载期间显示的图像文件的 URL（如果不可用，则显示视频的第一帧） |
| preload | auto metadata none | auto – 整个音频文件被加载 metadata – 仅加载元数据 none – 音频文件不与网页一起加载 不要与 autoplay 属性一起使用；不支持 IE |
| src | URL | 视频文件的绝对或相对 URL |
为了确保在所有主流浏览器上都能播放视频，我们必须提供至少两种不同的格式，MP4 和 WEBM 是最佳选择。因此，不使用 <video>标签的 src属性，而是在 <video>标签的开头和结尾之间添加前面章节中描述的多个 <source>标签。浏览器将扫描包含的媒体文件并选择第一个可以播放的文件。
例如，要包含一个带有控件和循环播放的视频文件，我们可以使用以下 HTML 代码：
<video controls='controls' loop='loop' width='640' height='480'>
<source src='videoclip.mp4' type='video/mp4' />
<source src='videoclip.webm' type='video/webm' />
video 元素在您的浏览器中不支持，请更新。
</video>4、为 Flash Player 添加视频
对于不支持 HTML5 的浏览器，我们可以在 <video>标签内包含一个 <object>标签，使用 SWF 格式（ffmpeg -f videoclip.mp4 videoclip.swf）。<object>标签包括 <param>标签，用于不支持 <object>的浏览器，以及一个 <embed>标签。
<object width='400' height='300'>
<param name='src' value='videoclip.swf' />
<param name='loop' value='true' />
<embed src='videoclip.swf' width='400' height='300' loop='true' />
</object>5、视频分享网站
在 YouTube 成功推出视频分享服务后，许多类似的英语和其他语言的网站相继出现。YouTube 仍然是最受欢迎的，但其他服务器提供了额外的功能。几乎所有视频分享网站都支持以下媒体格式：3gp、avi、asf、flv、mkv、mp4、mpegps、mov、ogg、wmv 等。下表提供了最受欢迎的视频分享网站列表。
最受欢迎的视频分享网站
| 名称 | 每月访问量 | 描述（仅美国每月访问量且增长中） |
|---|---|---|
| YouTube youtube.com | 800,000,000 | – 最受欢迎的视频网站，总访问量排名第三，每天超过 40 亿次视频浏览 – 1080p 高清视频，最大 2 GB 和 15 分钟 – 支持 3D 视频和 4k 格式（4096×3072 分辨率）的视频 – 兼容移动设备、iPod、PlayStations、Xbox 等 – Flash Player 和 HTML5 视频 – 视频编辑器、字幕等 – 用户评论、评分、视频回应等 – 不支持图像和音频文件 |
| DailyMotion dailymotion.com | 61,000,000 | 高清视频，最大文件大小 2 GB 和 60 分钟，音频 90 kbps MP3 或 AAC，Flash Player 或 HTML5 用户可以从图像创建幻灯片，最多 30 张图像，MP4 输出 |
| Vimeo vimeo.com | 17,000,000 | 高清视频（1920×1080），最大文件大小 5 GB，无限期 – Flash Player，HTML5 – 超过 800 万注册用户，6500 万每月唯一访问者 – 编码视频比特率最高（平均 2000 kbps，最高 5000 |
| Metacafe metacafe.com | 9,200,000 | – 短娱乐视频（电影、游戏、音乐、体育、电视剪辑等） – 最大文件大小 100 MB，视频转换为 320×240 FLV，VP6，比特率 330 kbps，MP3 音频 – 每天 1700 万次浏览，全球每月 4000 万唯一访问者 |
| Break break.com | 6,800,000 | – 有趣视频（流行文化、生活方式、车辆、游戏等） – 被推荐到首页的视频将获得奖励：第一 ，第二500，第三及以上 $600 |
| Veoh veoh.com | 6,100,000 | – 视频可以按系列和频道组织 – 在几个国家被屏蔽（防火墙） |
| RuTube rutube.com | 4,000,000 | 最大文件大小 300 MB，VGA 分辨率，Flash Player；主要在俄罗斯使用，具有不错的交互界面，每月 30 万唯一访问者，网站还允许 Facebook 登录 |
| Internet Archive archive.org | 1,600,000 | – 用户可以上传视频、音频、文档、免费书籍等 – 永久存储 |
| Multiply.com | 695,000 | 用户资料，非常受欢迎 |
| Qik.com | 505,000 | 基于移动设备 |
| Phanfare.com | 323,000 | 照片和视频 |
| Sevenload.com | 192,000 | 在几个国家被屏蔽 |
| OpenFilm.com | 114,000 | 电影、音乐、社区 |
| ScienceStage.com | 100,000 | 科学导向的媒体门户，用户还可以上传 mp3、vob 和 swf 格式的文件 |
6、网络服务器上的视频处理
由于 FFmpeg 和视频分享网站的流行，一些虚拟主机公司提供服务器上的视频处理支持，这需要比传统网站更高的 CPU 负载。下表预览了几家虚拟主机及其提供的参数。
提供 FFmpeg 支持的虚拟主机服务：
| 名称 URL | 描述 |
|---|---|
| CirtexHosting www.cirtexhosting.com | 支持：FFmpeg，FFmpeg-PHP，Mplayer + Mencoder + Yamdi + Yasm，flv2tool + GD 库，Xvidcore + Faac + Faad2，Libogg + Libvorbis + Libtheora，Libx264 + Libopencore-amrnb + Libopencore-amrwb，LAME MP3 编码器 |
| GlowHost www.glowhost.com | 可用模块：FFmpeg 和 FFmpeg-PHP，GD 库 2+，MPlayer 和 MEncoder，FAAD/FAAC，FLVTool2，Libogg 和 Libvorbis，LAME MP3 编码器，x264/H.264，MPEG-4 AVC |
| HostUpon www.hostupon.com | 启动视频网站、YouTube 克隆或社交网络的所有模块，用于视频上传。FFmpeg 主机脚本：Boonex Dolphin，PHPMotion，Social Engine，ABKsoft 脚本，Joomla 视频插件，Clipshare，ClipBucket，社交媒体，Rayzz，Vidi 脚本等。 |
| PacificHost.com www.pacifichost.com | 允许创建和运营像 YouTube 一样的在线视频分享网站。他们使用软件转换视频：ffmpeg-php，mplayer，mencoder，flvtool2，lame，libogg，libvorbis，xvid，theora，faac，phpshield 加载器。PacificHost 中的 FFmpeg 包括以下模块：libfaac，libfaad，libxvid，libamr-nb，libamr-wb，libgsm，libogg，libtheora，libvorbis |
| VPSDeploy https://vpsdeploy.com/whm-cpanel-ssd-hosting.php | 主机：支持 FFmpeg，flvtool2，X.264 插件，libogg，flac 和 LibTheora 用于视频流 |
版权声明：本文内容转自互联网，本文观点仅代表作者本人。本站仅提供信息存储空间服务，所有权归原作者所有。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至1393616908@qq.com 举报，一经查实，本站将立刻删除。
