前言
最近产品大哥说要把电商我的项目改成反对视频播放，视频要在后管我的项目上能够上传到七牛云，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格局的没问题
- <span style="color:red">问题起因：Chrome只反对规范的H.264形式编码</span>
解决办法
- 后盾做格局转换，因为当初后盾是七牛云，七牛云也有对应的这种服务，是免费的
- 应用流媒体的形式能够反对任意格局
- 冤屈一下经营小妹子，只能上传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 标签到底能播放什么
- 前端流媒体播放从入门到入坑