PHP七牛云上传大视频文件异步存为m3u8格式(包括回调过程)

问题引入

视频的第一帧加载缓慢。

简介

HTTP Live Streaming,缩写为HLS,是由苹果公司提出基于HTTP的流媒体网络传输协议。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载,每次只下载一些。当媒体流正在播放时,客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源,允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时,客户端会下载一个包含元数据的扩展 M3U (m3u8)播放列表文件,用于寻找可用的媒体流。

目前HLS协议被广泛的应用于视频点播和直播领域。

由Apple提出和开发,但并不是仅仅使用在ios系统上,目前在各种终端均得到了支持

M3U文件是一种纯文本文件,可以指定一个或多个多媒体文件的位置

使用场景

HLS与MP4格式的对比

视频格式

优点

缺点

MP4

各种设备及服务端、CDN都通用

头文件较大,边下载边缓存,起播慢

拖动时间轴播放时,需要一定的时间缓存

HLS

对视频进行切片,按切片播放,缓存小,起播快

拖动时间轴到任意时间播放时,可以快速定位到对应的切片进行播放,响应快

长视频会导致分片较多

总结

长视频的大文件头影响加载速度的视频体验,所以短视频适合使用mp4。

hls将整个视频流分成一个个小的基于Http的文件进行下载播放,因此支持视频点播和直播。

原理与使用

原理介绍

HLS 跟 DASH 协议的原理非常类似。通过将整条流切割成一个小的可以通过 HTTP 下载的媒体文件,然后提供一个配套的媒体列表文件,提供给客户端,让客户端顺序地拉取这些媒体文件播放,来实现看上去是在播放一条流的效果。由于传输层协议只需要标准的 HTTP 协议,HLS 可以方便的透过防火墙或者代理服务器,而且可以很方便的利用 CDN 进行分发加速,并且客户端实现起来也很方便。

HLS 把整个流分成一个个小的基于 HTTP 的文件来下载,每次只下载一些。HLS 协议由三部分组成:HTTP、M3U8、TS。这三部分中,HTTP 是传输协议,M3U8 是索引文件,TS 是音视频的媒体信息。

具体实现

七牛云在视频上传相关提供了相应的语言SDK供给前后端调用,但七牛提供给前端上传视频的上传策略较为单一,生成七牛云上传token的方式在JSSDK中是通过拼接完成的,只能实现简单的视频上传逻辑。因此视频上传很多策略只能在后端指定。

而如果在后端实现整个视频上传的流程的话,在视频上传过程中,服务器的荷载会比较大,并且线上的nginx服务器拒绝了20M以上的文件上传请求,因此大视频上传选择了前后端结合的方法由后端生成七牛云的上传token并指定相应的上传策略后,由前端使用token进行文

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
首先,你需要在你的 Vue 项目中安装 `qiniu-js` 包,这个包可以帮助你将文件上传七牛云。 安装命令:`npm install qiniu-js` 然后,在你的 Vue 组件中引入 `qiniu-js` 包,代码如下: ``` import * as qiniu from 'qiniu-js' ``` 接下来,我们需要实现异步上传文件到七牛云的功能。假设我们已经有一个上传文件的方法 `handleUpload`,代码如下: ``` handleUpload(file) { const token = 'your-qiniu-upload-token' // 替换成你的七牛云上传凭证 const key = file.name // 文件名作为七牛云存储的文件名 const config = { useCdnDomain: true, // 是否使用七牛云的 CDN 域名 } const putExtra = { fname: file.name, // 文件原始名字 params: {}, // 上传额外参数 mimeType: null // 上传文件类型 } const observable = qiniu.upload(file, key, token, putExtra, config) const observer = { next(res) { // 上传进度回调 console.log(res.total.percent) }, error(err) { // 上传失败回调 console.log(err) }, complete(res) { // 上传成功回调 console.log(res) } } const subscription = observable.subscribe(observer) // 执行上传操作 } ``` 在上面的代码中,我们通过 `qiniu.upload` 方法来执行文件上传操作,参数依次为: - `file`: 要上传的文件对象 - `key`: 上传七牛云后的文件名 - `token`: 七牛云上传凭证 - `putExtra`: 上传额外参数,包括文件名、上传参数和文件类型 - `config`: 上传配置,包括是否使用七牛云的 CDN 域名 在上传过程中,我们通过观察者模式来监听上传进度、上传成功和上传失败事件,并执行相应的回调函数。 最后,你可以在你的组件中调用 `handleUpload` 方法来上传文件,例如: ``` <el-upload action="" :before-upload="handleUpload" > <el-button type="primary">点击上传</el-button> </el-upload> ``` 在上面的代码中,我们使用了 Element UI 的上传组件,并将 `before-upload` 属性设置为 `handleUpload` 方法,这样就可以触发文件上传操作了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值