前言

最近產品大哥説要把電商項目改成支持視頻播放，視頻要在後管項目上可以上傳到七牛雲，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 標籤到底能播放什麼​
• 前端流媒體播放從入門到入坑​