关于前端:前端直传七牛云-30-sdk详细使用

前言

最近产品大哥说要把电商我的项目改成反对视频播放，视频要在后管我的项目上能够上传到七牛云，100M 以上的这种视频，因为咱们 nginx 限度了只能上传 30m，所以只能采纳前端直传七牛云的这个计划

我的项目介绍

这是一个基于若依的前后端不拆散的我的项目，前端代码卸载 jsp 外面，次要是后盾大哥在保护，咱们须要帮忙后盾做好前端直传这个动作。

前端直传七牛云

如何注册账号，创立空间

• 个别这一步，不须要咱们做，能够做为理解：https://developer.qiniu.com/kodo/1233/console-quickstart

如何上传？

七牛云官网上传资源文档

• 官网说有两种上传形式，一种是表单上传，
• 咱们就须要上传一个一两百 m 的货色，为啥要用 sdk 上传? 间接 用表单直传不香吗？感觉是决策失误了，哈哈，整个毛的分片上传！！

表单上传

还是表单简略！！为啥要给本人找事！！！

分片上传

• 1. 分片上传，须要应用七牛云官网的 sdk，如果找不到能够去：https://www.bootcdn.cn/qiniu-js/
• 2. 开始上传调用七牛云的上传办法

• 3. 从后盾失去 token 和 domain，因为七牛云上传胜利之后的外链是 domain / key 这种模式，这个坑我也踩了，节约半个小时

如何获取上传后的外网地址

4. 必须保障 key 的唯一性，倡议采纳工夫戳 + 随机数 + 文件名的形式

5. 一个文件的大略上传流程图

源码

七牛云官网文档

还碰到了一个谷歌浏览器无奈预览 avi 格局的问题，mp4 格局的没问题

• <span style=”color:red”> 问题起因：Chrome 只反对规范的 H.264 形式编码 </span>

解决办法

• 1. 后盾做格局转换，因为当初后盾是七牛云，七牛云也有对应的这种服务，是免费的
• 2. 应用流媒体的形式能够反对任意格局
• 3. 冤屈一下经营小妹子，只能上传 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 标签到底能播放什么​
• 前端流媒体播放从入门到入坑​