《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中的新标签是表中描述的<audio>标签:
<audio>标签(所有的属性都是可选的)

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

因为我们希望为同一个音频指定至少两个不同格式的文件,所以<audio>标签的src属性不会被使用,并且在打开<audio>和关闭</ audio>标签之间会添加多个<source>标签。 浏览器将扫描包含的媒体文件,并选择它支持播放的第一个文件。

<source>标签(所有的属性都是可选的)

属性 描述
media media_query 现在没有浏览器支持它,描述了媒体资源的类型
src URL 音频文件的绝对或相对URL
type MIME_type 最近媒体资源的MIME类型:
audio:音频/ mpeg,音频/ ogg,音频/ wav
video:视频/ mp4,视频/ ogg,视频/ 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 element is not supported in your browser, please update.
</audio>

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

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

使用HTML5添加视频

HTML5中的视频标签是一个<video>标签,其属性自动播放,控制,循环和静音使用等于属性名称的值(例如loop ='loop'),但许多浏览器接受跳过此值, 生产使用我们可以使用<video autoplay controls loop>。
<video>标签

属性 描述
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。 因此,不会使用<video>标签的src属性,并在开始的<video>和关闭</ 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 element is not supported in your browser, please update.
</video>

为Flash Player添加视频

对于不支持HTML5的浏览器,我们可以在<video>标签中包含SWF格式的<object>标签(ffmpeg -f videoclip.mp4 videoclip.swf)。 <object>标签包含不支持<object>标签的浏览器的<param>标签和<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>

视频分享网站

YouTube成功推出视频共享服务之后,还有许多英文和其他语言的类似网站。 YouTube仍然是最受欢迎的,但其他一些服务器提供了更多功能。 几乎所有的视频共享网站都支持以下媒体格式:3gp,avi,asf,flv,mkv,mp4,mpegps,mov,ogg,wmv等。最流行的视频共享网站列表位于表格中。
最受欢迎的视频分享网站

名称 每月访问者 描述
(每月的访客数量仅来自美国,并在增长)
YouTube
youtube.com
800,000,000 - 最受欢迎的视频网站,总访问量排名第三的网站,每天的视频浏览量超过40亿次
- 1080p高清视频,最大 2 GB和15分钟
- 支持4k格式的3D视频和视频(4096x3072分辨率
- 可用于手机,iPod,PlayStation,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 高清视频(1920x1080),最高 文件大小5 GB,无限期
- Flash Player,HTML5
- 注册用户超过800万,每月独立访问者达到6500万
- 编码视频比特率最高(平均2000 kbps,最高5000
Metacafe
metacafe.com
9,200,000 - 短片娱乐视频(电影,游戏,音乐,体育,电视剪辑等)
- 最大。 文件大小100 MB,视频转换为320x240 FLV,VP6,比特率330 kbps,MP3音频
- 每天1700万次观看,全球每月4000万独立访客
Break
break.com
6,800,000 - 有趣的视频(流行文化,生活方式,交通,游戏等)
- 被推荐到主页的视频将获得奖励:首先是$ 400,第二个$ 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格式的文件

Web服务器上的视频处理

由于ffmpeg和视频共享网站的流行,一些虚拟主机公司提供对ffmpeg服务器上视频处理的支持,这需要比传统网站更大的CPU负载。 包含他们提供的参数的几个虚拟主机的预览在表中:
带有FFmpeg支持的虚拟主机服务

Name 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 Encoder
GlowHost
www.glowhost.com
可用模块:FFmpeg和FFmpeg-PHP,GD Library 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,社交引擎,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用于videostreaming

通过视频上传获利

一些视频分享网站提供了查看上传视频的付款方式:

  • YouTube合作伙伴计划为创作者提供工具和程序,以构建受众群体并通过视频获利。 获利的视频会显示增加,更多信息位于网页http://www.youtube.com/account_monetization
  • Blip.tv从包含的附加费中支付50%,但创作者必须上传原始视频系列,而不是所有系列都被接受,有关更多信息,请访问http://blip.tv/users/apply
  • NowVideo.eu为每1000个视频流支付10美元(完整的访问者浏览量),详情请见http://www.nowvideo.eu/affiliate.php
  • Break.com从用户中选择有趣的视频并将它们包含到其主页中。 这些视频的创作者将为每个视频从200美元到600美元进行支付,金额取决于用户是否决定出售或许可视频和其他条件,更多信息请访问http://info.break.com/break/html/。upload_videos.html
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容