使用ffmpeg转码m3u8并播放

2019-02-15 10:35:31

简介

随着客户的增加,mp4文件播放的弊端也日益凸显,主要集中在两个方面


当视频时长比较长的时候,mp4的关键帧元素往往很大,需要加载很长时间才能开始播放,网速不好的情况缓冲加载就要20多秒的时间,客户早已急不可耐。

当用户打开一个视频播放的时候,浏览器会持续请求下载mp4文件直到下载完成,就算是用户暂停视频播放浏览器也会持续这种下载状态,如果这个视频文件是500M则会请求服务器下载500M文件,是1G则会不停下载1G,给服务器硬盘和宽带造成很大浪费和压力。

为了解决上述问题,公司打算使用m3u8格式来替代mp4格式。


m3u8是苹果公司开发的一项新型播放格式,这种播放格式支持目前市面的windows、androis、ios设备主流的浏览器,同样的视频文件既可以在flash环境播放,又能在无flash的html5环境播放,它的优势还不止于此,它可以实现多种码率在不同网速下的自动切换,网速好自动切换高清晰度视频,网速慢自动播放低清晰度文件,还可以实现流加密(视频文件本身加密)、分段下载播放、任意时间点拖拽播放、随机视频文件广告插入等等优势,所以公司打算是用m3u8格式作为视频格式。


mp4转码m3u8

如果视频不为mp4格式,需先将视频转码为mp4,可使用如下命令进行转换


ffmpeg -i 本地视频地址 -y -c:v libx264 -strict -2 转换视频.mp4

1

将mp4格式转换为ts格式


ffmpeg -y -i 本地视频.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 转换视频.ts

1

将ts文件进行切片


ffmpeg -i 本地视频.ts -c copy -map 0 -f segment -segment_list 视频索引.m3u8 -segment_time 5 前缀-%03d.ts

1

其中segment 就是切片,-segment_time表示隔几秒进行切一个文件,上面命令是隔5s,你也可以调整成更大的参数。


转换好的文件




跨域问题

在跨域的网站根目录放crossdomain.xml文件,下面是允许所有的网站(一般不采取这样的方式,只是方便调试)均可以跨越访问资源配置如下:


<?xml version="1.0" encoding="utf-8"?>

<cross-domain-policy> 

    <allow-access-from domain="*"/>  

</cross-domain-policy> 

1

2

3

4

限制指定网站访问,可以参考百度https://www.baidu.com/crossdomain.xml配置


<cross-domain-policy>

    <allow-access-from domain="*.baidu.com"/>

    <allow-access-from domain="*.bdstatic.com"/>

    <allow-http-request-headers-from domain="*.baidu.com" headers="*"/>

    <allow-http-request-headers-from domain="*.bdstatic.com" headers="*"/>

</cross-domain-policy>

1

2

3

4

5

6

如果文件存储在第三方平台上,比如阿里云OSS,就把crossdomain.xml放在bucket根目录下


播放

这里推荐使用第三方h5播放器ckplayer,集成完成后看下视频请求




可以看到视频先加载的m3u8格式的索引文件,然后开始加载视频,跟据所以文件依次加载abc000.ts、abc001.ts、abc002.ts,这时候拖动视频,视频开始加载abc011.ts、abc012.ts、abc013.ts跳过了4~10的文件,这就是m3u8的好处,按需加载


  • 2019-12-10 16:21:05

    display:flex的子元素无法设置宽度

    子元素有个flex-shrink属性,表示在父元素宽度不够的情况下是自动收缩不?0表示不自动收缩,1表示自动收缩;所以将子元素(图片)添加属性:flex-shrink:0;即

  • 2019-12-10 21:14:11

    axios文件上传功能+formData

    在项目中使用axios上传文件,记得new一个纯净的axios或者考虑用ajax请求。因为axios在项目估计已经用了全局配置请求头等信息,这里的配置可能被全局请求头拦截,导致请求失败。 2.1构造formData 作者:exmexm 链接:https://www.jianshu.com/p/9c708a47d8a5 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2019-12-11 16:04:15

    CSS中的 “var()” 和 “:root”

    var() var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)

  • 2019-12-11 16:18:51

    npm发布vue组件

    开发之前先看看官网的 开发规范 我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样

  • 2019-12-11 16:21:00

    .vue文件 加scoped 样式不起作用

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度。

  • 2019-12-11 16:22:04

    Vue中的scoped和scoped穿透,scoped原理

    在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。

  • 2019-12-12 14:19:32

    laravel自定义分页LengthAwarePaginator

    有时候我们使用larave提供的后台分页数据库查询,有时候限制太多,我们需要自己定制分页功能。 下面是我给大家一个例子,我们可以根据例子,制作自己的分页功能。