也是一个小菜鸟，一次在做练习时遇到一个问题，就是在html5页面中嵌入视频的时候页面中只显示声音却不显示图像。HTML5中并没有指定视频解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式(注：H.264是公认的mp4的标准编码)的视频，Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，指定HTML5的视频时，你必须提供这两种格式。刚开始我以为视频的格式不对，我嵌入的视频是mp4格式的，可是试了好多次结果都一样，只有声音不显示图像，以前从没遇到过这种情况，瞬间懵了。后来上网查了查，才知道原来视频不光区分格式，相同的格式的情况下还区分编码。就拿mp4格式的视频来说吧，mp4有3种编码，mpg4(xdiv),mpg4(xvid)，avc(h264)，这三种格式虽然在播放器里可以正常播放，但是mpg(xdiv),mpg4(xvid)这两种格式嵌到html5页面里的时候就会出现上述我说的那种情况，转换成H264编码就可以网页正常播放了。可是如何给我们的视频转码(转换编码)呢？下面我就介绍一下如何使用格式工厂来转码(之所以我介绍用格式工厂来转码是因为我觉得格式工厂的功能太强大了，不仅能转换视频的格式还可以剪辑视频、音频，竟然还可以转换视频的编码，集多功能于一身)：对于扩展名相同的视频文件它们的视频的编码可能是不一样的，如mp4格式的视频的编码就可能是mpg4(xdiv)或mpg4(xvid)或avc(h264)，在用格式工厂软件进行视频转换时可以设置视频的编码格式，使视频可以让不同的播放器打开。

第一步：打开格式工厂软件，这里我以把视频转换为mp4格式为例说明单击[->mp4]按钮

、内容点评

本文以轻松幽默的语气，讲解了视频编解码的一些基本常识，并以爱奇艺为例，讲述了视频编解码技术在国内的发展以及未来的一些展望。

▼ 阅读本文需要有一些音视频编解码技术的基础，否则请先阅读以下文章：

《即时通讯音视频开发（一）：视频编解码之理论概述》

《即时通讯音视频开发（二）：视频编解码之数字视频介绍》

《即时通讯音视频开发（三）：视频编解码之编码基础》

《即时通讯音视频开发（十九）：零基础，史上最通俗视频编码技术入门》

本文并未就具体的视频编解码概念进行深入的讨论，目的是尽可能以浅显易懂的方式让读者轻松了解本文标题想呈现的内容。如果您想深入了解视频编解码技术，可继续阅读以下文章。

▼ 以下是比较深入的视频编解码相关文章：

《即时通讯音视频开发（四）：视频编解码之预测技术介绍》

《即时通讯音视频开发（五）：认识主流视频编码技术H.264》

《即时通讯音视频开发（十三）：实时视频编码H.264的特点与优势》

《即时通讯音视频开发（十七）：视频编码H.264、VP8的前世今生》

《即时通讯音视频开发（十八）：详解音频编解码的原理、演进和应用选型》

《移动端实时音视频直播技术详解（四）：编码和封装》

《[观点] WebRTC应该选择H.264视频编码的四大理由》

▼ 爱奇艺技术产品团队还分享了其它两篇文章，有兴趣也可以读一读：

《爱奇艺移动端网络优化实践分享：网络请求成功率优化篇》

《爱奇艺技术分享：爱奇艺Android客户端启动速度优化实践总结》

欢迎关注“即时通讯技术圈”，更多好文会同步发布在公众号.

（本文同步发布于：http://www.52im.net/thread-3028-1-1.html）

图网长期致力于web前端开发，难免会和各种视频、音频打交道，除了常见的mp4、mp3等格式，其实还有m3u8、oga等等其他没有那么常见的格式，那么你都了解了吗？下面介绍一下html5常见的音视频格式和解决方案。

万能播放插件js

1.ckplayerhttp://www.ckplayer.com/

2.Sewise Player

一款专业的免费网页HTML5视频、流播放器，它功能强大，体积小，跨平台，兼容性好，使用方便简洁。确定html5与flash播放的优先级。支持跨终端播放，不仅适用PC端播放，也适配ipad、iphone、android手机、平板电脑等移动终端。 支持多系统多平台，PC端支持Window、MacOS、Linux 等，移动端支持Android、IOS、Window Phone等。 兼容HTML5，确保98％的互联网用户可以看到您的视频。 支持多浏览器兼容，IE6/7/8/9/10、Chrome、Firefox、Safari、Opera等。 接收来自任何地方的音视频流 支持mp4、m3u8、oga、webm、theora、flv、f4v等视频格式播放。 支持Flash播放m3u8文件，以及AES-128解码播放。 支持播放地址AMF, AJAX, JOSNP类型请求。 支持PC与Mobile平台播放器自动识别功能。 支持浏览器HTML5与Flash特性检测。

3.hls

http://www.bootcdn.cn/hls.js/

仅支持hls(m3u8)地址，不支持flv,mp4,mov,f4v,3gp格式，做了跨平台的适配， 支持PC终端,Android安卓终端,iOS苹果终端,WP终端的正常播放。

m3u8是m3u的一种，是utf-8格式的，Apple 为了提高流播效率开发的技术，特点是将流媒体切分为若干 TS 片段（比如每10秒一段），然后通过一个扩展的 m3u 列表文件将这些 TS 片段集中起来供客户端播放器接收。可以做多码率的适配，根据网络带宽，客户端会自动选择一个适合自己码率的文件进行播放，保证视频流的流畅。

MP4是一套用于音频、视频信息的压缩编码标准，支持所有音频和视频以及高级内容（或它们的混合），编码格式：H.264格式高清

MP4是遵循MPEG-4（ISO 14496-14）的官方容器格式定义的广义文件扩展名。它可以流媒体化并支持众多多媒体的内容（多音轨(multiple audio)、视频流(video)、字幕(subtitlestreams)、图片(pictures)、可变桢率(variable-framerates)、码率(bitrates)、采样率(samplerates)等）和高级内容(advanced content)（官方称之为“Richmedia”(超媒体)或“BIFS”(Binary Format for Scenes/二进制格式场景），类似2D和3D图形，动画、用户界面、类DVD菜单，上述这些AVI搞不定的东西。

其他相关的扩展名：

– .m4v：是.mp4文件的错误扩展名，由apple提出，支持视频+音频，m4v扩展名可以安全地更名为.mp4

– .m4a：是.mp4文件的错误扩展名，由apple提出，只支持音频，m4a扩展名可以安全地更名为.mp4

– .m4p：随iTunes发售的DRM(Digital Rights Management/数字版权保护技术)产权保护的文件，使用Apple开发的DRM sheme

– .m4e：由.sdp修改扩展名的来的文件，Envivio用其于流媒体播放。

– .m4v, -.mp4v, -.cmp, -.divx, .-xvid, .264：raw的mpeg-4视频流（并非内含于mp4）。

– .3gp, -.3g2：手机中使用的格式，其中储存的内容同样在.mp4未被定义（H.263, AMR(Adaptive Multi Rate/自适应多码率)）。

OGG OGGVobis(oggVorbis)是一种音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是”.ogg”。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

OGV是html5中的一个名为Ogg Theora的视频格式，起源于ogg容器格式。

webm由Google提出，是一个开放、免费的媒体文件格式。WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的，WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。

MOV(QuickTime)它是Apple公司开发的一种音频、视频文件格式，用于存储常用数字媒体类型。QuickTime用于保存音频和视频信息，包括Apple Mac OS，MicrosoftWindows95/98/NT/2003/XP/VISTA，甚至WINDOWS7在内的所有主流电脑平台支持。

WMV 是微软推出的一种采用独立编码方式并且可以直接在网上实时观看视频节目的文件压缩格式。WMV格式的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载、可伸缩的媒体类型、流的优先级化、多语言支持、环境独立性、丰富的流间关系以及扩展性等。

MPG/MPEG(.mpg, .mpeg)

Realmedia(.rm, .rmvb)

AVI(.avi)

Flv/swf

本文由专业的WEB前端外包公司-切图网原创，转载请保留版权（ WEB前端开发外包www.qietu.com ）切图网始于2007年，提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询！