前言

最近产品大哥说要把电商项目改成支持视频播放，视频要在后管项目上可以上传到七牛云，100M以上的这种视频，因为我们nginx限制了只能上传30m，所以只能采用前端直传七牛云的这个方案

项目介绍

这是一个基于若依的前后端不分离的项目，前端代码卸载jsp里面，主要是后台大哥在维护，我们需要帮助后台做好前端直传这个动作。

前端直传七牛云

如何注册账号，创建空间

• 一般这一步，不需要我们做，可以做为了解：https://developer.qiniu.com/kodo/1233/console-quickstart (opens new window)

如何上传？

七牛云官网上传资源文档 (opens new window)

• 官网说有两种上传方式，一种是表单上传，

• 我们就需要上传一个一两百m的东西，为啥要用sdk上传? 直接 用表单直传不香吗？感觉是决策失误了，哈哈，整个毛的分片上传！！

表单上传

还是表单简单！！ 为啥要给自己找事！！！

分片上传

• 1. 分片上传，需要使用七牛云官网的sdk，如果找不到可以去：https://www.bootcdn.cn/qiniu-js/ (opens new window)
• 2. 开始上传调用七牛云的上传方法

• 3. 从后台得到token 和domain，因为七牛云上传成功之后的外链是 domain / key这种形式，这个坑我也踩了，浪费半个小时

如何获取上传后的外网地址 (opens new window)

4. 必须保证key的唯一性，建议采用时间戳 +随机数+文件名的方式

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

源码 (opens new window)

七牛云官方文档 (opens new window)

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

• 问题原因：Chrome只支持标准的H.264方式编码

解决办法

• 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 类型列表 (opens new window)

video 是如何实现兼容多协议，多容器，多编码的JS播放器

播放器

• plyr (opens new window)

• videojs (opens new window)

参考资料

• jquery 如何封装上传组件 (opens new window)​

• Chrome使用video无法正常播放MP4视频的解决方案 (opens new window)​

• web端原生video标签播放视频的一些坑 (opens new window)​

• 怎么可以让安卓浏览器可以在线看 avi 等各种格式的视频？ (opens new window)​

• H5直播系列二 MSE(Media Source Extensions) (opens new window)​

• video 是如何实现兼容多协议，多容器，多编码的JS播放器 (opens new window)​

• 「完全理解」video 标签到底能播放什么 (opens new window)​

• 前端流媒体播放从入门到入坑 (opens new window)​