前言
最近产品大哥说要把电商项目改成支持视频播放,视频要在后管项目上可以上传到七牛云,100M以上的这种视频,因为我们nginx限制了只能上传30m,所以只能采用前端直传七牛云的这个方案
项目介绍
这是一个基于若依的前后端不分离的项目,前端代码卸载jsp里面,主要是后台大哥在维护,我们需要帮助后台做好前端直传这个动作。
前端直传七牛云
如何注册账号,创建空间
- 一般这一步,不需要我们做,可以做为了解:https://developer.qiniu.com/kodo/1233/console-quickstart
如何上传?
七牛云官网上传资源文档
- 官网说有两种上传方式,一种是表单上传,
- 我们就需要上传一个一两百m的东西,为啥要用sdk上传? 直接 用表单直传不香吗?感觉是决策失误了,哈哈,整个毛的分片上传!!
表单上传
还是表单简单!! 为啥要给自己找事!!!
分片上传
-
- 分片上传,需要使用七牛云官网的sdk,如果找不到可以去:https://www.bootcdn.cn/qiniu-js/
-
- 开始上传调用七牛云的上传方法
-
- 从后台得到token 和domain,因为七牛云上传成功之后的外链是 domain / key这种形式,这个坑我也踩了,浪费半个小时
如何获取上传后的外网地址
- 必须保证key的唯一性,建议采用时间戳 +随机数+文件名的方式
5.一个文件的大概上传流程图
源码
七牛云官方文档
还碰到了一个谷歌浏览器无法预览avi格式的问题,mp4格式的没问题
- 问题原因:Chrome只支持标准的H.264方式编码
解决办法
-
- 后台做格式转换,因为现在后台是七牛云,七牛云也有对应的这种服务,是收费的
-
- 使用流媒体的方式可以支持任意格式
-
- 委屈一下运营小妹子,只能上传mp4格式(我选择了这个,哈哈)
浏览器视频格式支持
- 谷歌浏览器支持mp4播放格式,但是MP4的视频格式可以使用DivX也可使用H264,Chrome只支持H264。
- 常用视频格式mp4,mov,avi,谷歌浏览器仅支持mp4中H264视频格式,safari支持mov,mp4但avi不支持,发现web端浏览器对这些支持并不好,相比较而言移动端还可以
- 视频比较大,直接在加载整个页面显然不是最好的选择,于是想到了m3u8流媒体,将一个大的媒体文件进行分片直接用播放器进行在线播放
- MP4容器、H.264/AVC视频编码、AAC音频编码
- MP4容器,H.265/HEVC视频编码,AAC音频编码
- MP4容器,DIVX视频编码,MP3音频编码
- FLV容器,H.264/AVC视频编码,AAC音频编码
- FLV容器,H.265/HEVC视频编码,AAC音频编码
- AVI容器,DIVX视频编码,MP3音频编码
- AVI容器,XVID视频编码,MP3音频编码
- WebM容器,VP8视频编码,Vorbis音频编码
- WebM容器,VP9视频编码,Opus音频编码
常见 MIME 类型列表
video 是如何实现兼容多协议,多容器,多编码的JS播放器
播放器
- plyr
- videojs
参考资料
- jquery 如何封装上传组件
- Chrome使用video无法正常播放MP4视频的解决方案
- web端原生video标签播放视频的一些坑
- 怎么可以让安卓浏览器可以在线看 avi 等各种格式的视频?
- H5直播系列二 MSE(Media Source Extensions)
- video 是如何实现兼容多协议,多容器,多编码的JS播放器
- 「完全理解」video 标签到底能播放什么
- 前端流媒体播放从入门到入坑
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net