《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选项。

浏览器MP3OGG*WAVApple Safari 5+yesnoyesFirefox 3.6+noyesyesGoogle Chrome 6+yesyesyesInternet Explorer 9+yesnonoOpera 10.6+yesyesyesMaxthon 3+yesyesyes

浏览器MP4OGGWEBMApple Safari 5+yesnonoFirefox 3.6+noyesyesGoogle Chrome 6+yesyesyesInternet Explorer 9+yesnonoOpera 10.6+noyesyesMaxthon 3+yesyesyes如果设置，则显示控件：播放，暂停，寻找，音量对于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>标签（所有的属性都是可选的）属性值描述autoplayautoplay如果设置，音频开始准备就绪时播放controlscontrols如果设置，则显示控件：播放，暂停，寻找，音量looploop如果设置，音频播放一遍又一遍preloadautometadatanoneauto - 整个音频文件被加载metadata - 只加载元数据none - 音频文件未与网页一起加载不要将它与自动播放属性一起使用; 它最近在IE和Opera中不支持srcURL音频文件的绝对或相对URL因为我们希望为同一个音频指定至少两个不同格式的文件，所以<audio>标签的src属性不会被使用，并且在打开<audio>和关闭</ audio>标签之间会添加多个<source>标签。 浏览器将扫描包含的媒体文件，并选择它支持播放的第一个文件。<source>标签（所有的属性都是可选的）属性值描述mediamedia_query现在没有浏览器支持它，描述了媒体资源的类型srcURL音频文件的绝对或相对URLtypeMIME_type最近媒体资源的MIME类型：audio:音频/ mpeg，音频/ ogg，音频/ wavvideo:视频/ 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 4Google Chrome 6Internet Explorer 9Maxthon 3Opera 12使用HTML5添加视频HTML5中的视频标签是一个<video>标签，其属性自动播放，控制，循环和静音使用等于属性名称的值（例如loop ='loop'），但许多浏览器接受跳过此值， 生产使用我们可以使用<video autoplay controls loop>。<video>标签属性值描述autoplayautoplay如果已设置，视频在准备就绪时开始播放controlscontrols如果设置，则显示按钮控制：播放，暂停，寻找，音量，切换全屏，字幕等height像素视频播放器的高度looploop如果设置，视频会一遍又一遍播放muted静音如果设置，音频流静音，最近在Apple Safari和Internet Explorer中不支持posterURL在视频下载期间显示的图像文件的URL（如果不存在）显示的是视频的第一帧preloadautometadatanoneauto -整个音频文件被加载metadata -只加载元数据none - 音频文件未与网页一起加载不要将它与自动播放属性一起使用; 现在它不适用于IEsrcURL视频文件的绝对或相对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等。最流行的视频共享网站列表位于表格中。最受欢迎的视频分享网站名称每月访问者描述(每月的访客数量仅来自美国，并在增长)YouTubeyoutube.com800,000,000- 最受欢迎的视频网站，总访问量排名第三的网站，每天的视频浏览量超过40亿次- 1080p高清视频，最大 2 GB和15分钟- 支持4k格式的3D视频和视频（4096x3072分辨率- 可用于手机，iPod，PlayStation，Xbox等- Flash Player和HTML5视频- 视频编辑器，字幕等- 用户评论，评分，视频回复等- 不支持的图像和音频文件DailyMotiondailymotion.com61,000,000高清视频，最大文件大小2 GB和60分钟，音频90 kbps MP3或AAC，Flash Player或HTML5用户可以从图像创建幻灯片，最多30幅图像，MP4输出Vimeovimeo.com17,000,000高清视频（1920x1080），最高 文件大小5 GB，无限期- Flash Player，HTML5- 注册用户超过800万，每月独立访问者达到6500万- 编码视频比特率最高（平均2000 kbps，最高5000Metacafemetacafe.com9,200,000- 短片娱乐视频（电影，游戏，音乐，体育，电视剪辑等）- 最大。 文件大小100 MB，视频转换为320x240 FLV，VP6，比特率330 kbps，MP3音频- 每天1700万次观看，全球每月4000万独立访客Breakbreak.com6,800,000- 有趣的视频（流行文化，生活方式，交通，游戏等）- 被推荐到主页的视频将获得奖励：首先是$ 400，第二个$ 500，第三个和接下来是$ 600Veohveoh.com6,100,000- 视频可以按照系列和频道进行组织- 在几个国家被封锁(被墙了。。。。)RuTuberutube.com4,000,000最大的文件大小300 MB，VGA分辨率，Flash Player; 主要用户在俄罗斯，交互界面还是不错的，每个月的独立访客30万，该网站也可以登录FacebookInternet Archive1,600,000- 用户可以上传视频，音频，文档，免费书籍等- 永久存储Multiply.com695,000用户档案，非常受欢迎Qik.com505,000基于移动设备Phanfare.com323,000照片和视频Sevenload.com192,000在几个国家被封锁OpenFilm.com114,000电影，音乐，社区ScienceStage.com100,000以科学为导向的媒体门户，用户还可以上传mp3，vob和swf格式的文件Web服务器上的视频处理由于ffmpeg和视频共享网站的流行，一些虚拟主机公司提供对ffmpeg服务器上视频处理的支持，这需要比传统网站更大的CPU负载。 包含他们提供的参数的几个虚拟主机的预览在表中：带有FFmpeg支持的虚拟主机服务Name URL描述CirtexHostingwww.cirtexhosting.com支持：FFmpeg，FFmpeg-PHP，Mplayer + Mencoder + Yamdi + Yasm，flv2tool + GD库，Xvidcore + Faac + Faad2，Libogg + Libvorbis + Libtheora，Libx264 + Libopencore-amrnb + Libopencore- amrwb，LAME MP3 EncoderGlowHostwww.glowhost.com可用模块：FFmpeg和FFmpeg-PHP，GD Library 2+，MPlayer和MEncoder，FAAD / FAAC，FLVTool2，Libogg和Libvorbis，LAME MP3编码器，x264 / H.264，MPEG-4 AVCHostUponwww.hostupon.com所有模块启动视频网站，Youtube克隆或社交网络与视频上传。 FFmpeg托管脚本：Boonex Dolphin，PHPMotion，社交引擎，ABKsoft脚本，Joomla视频插件，Clipshare，ClipBucket，社交媒体，Rayzz，Vidi脚本等PacificHost.comwww.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和libvorbisVPSDeployhttps://vpsdeploy.com/whm-cpanel-ssd-hosting.php托管：FFmpeg支持，flvtool2，X.264插件，libogg，flac和LibTheora用于videostreaming通过视频上传获利一些视频分享网站提供了查看上传视频的付款方式：YouTube合作伙伴计划为创作者提供工具和程序，以构建受众群体并通过视频获利。 获利的视频会显示增加，更多信息位于网页http://www.youtube.com/account_monetizationBlip.tv从包含的附加费中支付50％，但创作者必须上传原始视频系列，而不是所有系列都被接受，有关更多信息，请访问http://blip.tv/users/applyNowVideo.eu为每1000个视频流支付10美元（完整的访问者浏览量），详情请见http://www.nowvideo.eu/affiliate.phpBreak.com从用户中选择有趣的视频并将它们包含到其主页中。 这些视频的创作者将为每个视频从200美元到600美元进行支付，金额取决于用户是否决定出售或许可视频和其他条件，更多信息请访问http://info.break.com/break/html/。upload_videos.html