在MP4文件格式中，整个视频容器都是由多个box和子box组成，根据box类型主要分为3大类：视频类型（ftyp）、视频数据（mdat）、视频信息（moov）。视频信息（moov）用来描述视频数据（mdat）。（注：还有一个主要box为moof box，因这里仅解释普通MP4格…

代表每秒传送的比特数。 比特率又称为“二进制位速率”，俗称“码率”，“码流”，又称为数据信号速率。这大兄弟别名好多。。 从传输速度的发展看来，摩尔定律不仅应用在晶体管的密度，同样可以用在传输速度：比特率大概每18个月提高一倍。 比特率越高，代表单位时间传送的数据就越多。 举个例…

Technologically, for greater probability to be happy. 只要在 HTML5 中使用过视频播放的同学对 video 标签一定不会陌生，不过很多同学只使用了 video 的基础功能，实际上 video 拥有强大潜能的，只要姿势正确…

自从HTML5提供了video标签，在网页中播放视频已经变成一个非常简单的事，只要一个video标签，src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址，在早期一般网站资源文件不怎么通过referer设置防盗链，当我们拿到视频的地址后可以随意的下载或使用（每次…

我司的官网首页——贝聊官网，首屏有一个自动播放的背景视频，一直被诟病视频加载慢、播放卡。刚开始以为是文件太大，或者是网速太慢，但当我去优化它的时候，发现并没有预想的简单。本文记录了优化过程和经验总结，希望能对读者有所帮助。 官网的首页由6屏组成,首屏主要内容是一个自动循环播放的…

Web 开发者们一直以来想在 Web 中使用音频和视频，但早些时候，传统的 Web 技术不能够在 Web 中嵌入音频和视频，所以一些像 Flash、Silverlight 的专利技术在处理这些内容上变得很受欢迎。 这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支…

随着流量时代的到来和硬件技术的提升，越来越多的网站希望能在PC端或移动端播放自己的视频，而 <video>的兼容性的逐渐完善，使得开发者更愿意使用它来实现视频播放场景。 本篇文章主要罗列视频播放的通用场景及各场景下踩过的坑，希望能帮助开发者在遇到需求开发时能更快地选择合适的技术…

0. 背景 HTML5中一个十分重要的提升就是对音视频的无插件支持，不论是各个端浏览器对各种视频容器格式越来越丰富的支持，还是Media Source Extension（MSE）对Video扩展性的提升，我们现在能对浏览器上的音视频做越来越多的新奇尝试。但也因为Web技术的开…