网页播放视频踩过的坑

遇到的问题

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

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

网页播放视频格式对比

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

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

我采用的是 mp4 格式 + H5 <video>标签,这个所有的浏览器都支持,具有很好的普及型和兼容性!

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」进行转化一下,把文件信息移动到视频文件的前面,这样浏览器在加载时就可以一边加载一遍播放了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 视频编码格式全面解析 我们在详解各种主流的视频格式之前,先抛开各种视频格式的定义,来讨论这样一件事情:你觉得目前的...
    latthias阅读 21,360评论 2 30
  • 视频编码与封装方式详解 1.编码方式和封装格式 2.视频编码标准两大系统 MPEG-1 MPEG-2 MPEG-3...
    latthias阅读 6,417评论 0 22
  • 前言 说到视频,大家自己脑子里基本都会想起电影、电视剧、在线视频等等,也会想起一些视频格式 AVI、MP4、RMV...
    ForestSen阅读 23,361评论 10 203
  • [TOC] 音视频&流媒体 是什么促使我要写这一篇音视频入门文章?那是因为和一妹子打赌码率的概念,结果输了;对一个...
    AllenWu阅读 4,913评论 1 24
  • “亲,你为啥要走?难道也是…..” 在我确定离职日期后,一些半生不熟,甚至是从没聊过天的同事突然都不约而同地在微信...
    拉奇葛儿阅读 294评论 3 3