网页播放视频踩过的坑

遇到的问题

公司官网首页需要播放一段介绍公司情况的视频，类似于宣传性质！给到我的是 mp4 格式的视频 300 MB，这个显然不能直接放到网页上播放！

显然要想的是该如何缩小视频文件大小！

网页播放视频格式对比

目前我了解到的方便在网页上播放的视频格式有 flv，swf，mp4等等！

flv 和 swf 需要浏览器支持 「adobe flash」可是据我所知不是所有的浏览器都支持 flash 的，比如到就遇到 chrome 浏览器就不支持flash，但是听说有办法解决，这里我就不赘述了！

我采用的是 mp4 格式 + H5

MP4 

MP4 是一种视频文件格式，但是视频文件格式下又有很多编码格式，现在常用的只有 H264 和 MPEG4格式    H263 和VP6格式 已淘汰！

H.264被MPEG组织称作AVC（Advanced Video Codec/先进视频编码），是MPEG4标准的第10部分，用来取代之前MPEG4第2部分（简称MPEG4P2）所制定的视频编码，因为AVC有着比MPEG4P2强很多的压缩效率。最常见的MPEG4P2编码器有divx和xvid（开源），最常见的AVC编码器是x264（开源）

MPEG-4是一套用于音频、视频信息的压缩编码标准，由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“動態影像专家组”（Moving Picture Experts Group，即MPEG）制定，第一版在1998年10月通過，第二版在1999年12月通過。MPEG-4格式的主要用途在於網上串流、光碟、語音傳送（視訊電話），以及電視廣播。

经过选择我决定使用 H.264，于是采用格式工厂对原来的视频格式进行格式转换，选择 MP4 输出设置选择 AVC 480p，点击确定，然后选择输出位置

点击确定，然后点击开始转换就行

转换完成后还是很不错的，300 MB 的文件转换完成后变成的 29 MB 左右，而且清晰度也不错！

边加载边播放的 MP4

由于 MP4 的视频文件信息默认是放置在文件末尾，也就导致了必须要把文件加载完毕才能播放视频，这显然是不好的，所以下面采用 「MP4 Fast Start」进行转化一下，把文件信息移动到视频文件的前面，这样浏览器在加载时就可以一边加载一遍播放了！