步驟1:注冊七牛雲賬號 https://portal.qiniu.com/signup?code=1hgfpqu1al36a
步驟2:創建xxx目錄&uploads目錄,再xxx目錄下創建img.js修改下述參數信息
步驟3:yarn add express multer fs qiniu
步驟4:啟動img.js文件,通過postman測試
//1. 導入模塊 const express = require("express") const multer = require('multer') const fs = require("fs") const path = require("path") const qiniu = require('qiniu'); //2. 配置 const app = express(); const upload = multer({ dest: 'temp/' }) //上傳圖片:1-放到臨時目錄中,2-移動更名 const accessKey = 'lfJfOXL0JPFxs1ShWNwOBaBxk7YQS_BOyXeFVZR8' // 【改】 const secretKey = 'MwgNj9JjJNk5rzn5MTEE8LwrRC8ed3fb40XLFTBO' // 【改】 const mac = new qiniu.auth.digest.Mac(accessKey, secretKey) const options = { // 自定義憑證有效期(示例2小時,expires單位為秒,為上傳憑證的有效時間) scope: 'test', // 對象存儲空間名稱【重要 得改成自己的】 expires: 7200 } const putPolicy = new qiniu.rs.PutPolicy(options) const uploadToken = putPolicy.uploadToken(mac) //3.路由 app.post('/upload', upload.single('avatar'), (req, res, next) => { // console.log(req.file) // res.send('上傳成功') // fs.rename(req.file.path, req.file.originalname, (err) => { let oldPath = req.file.path let newPath = req.file.filename+path.extname(req.file.originalname) fs.rename(oldPath,'uploads/'+newPath, err => { if (err) throw err; // 同步七牛雲 let localFile = 'uploads/'+newPath let qiniuFileName = newPath let putExtra = new qiniu.form_up.PutExtra() let formUploader = new qiniu.form_up.FormUploader() formUploader.putFile(uploadToken, qiniuFileName, localFile, putExtra, function(respErr, respBody, respInfo) { if (respErr) { throw respErr; } if (respInfo.statusCode == 200) { // console.log(respBody); res.json({ "data": { "username": newPath, "url": newPath }, "meta": { "msg": "上傳成功", "status": 201 } }) } else { // console.log(respInfo.statusCode); // console.log(respBody); res.json({ "data": null, "meta": { "msg": "上傳失敗", "status": 500 } }) } }); }); }) //4.啟動服務 app.listen(8889);
https://www.jianshu.com/p/1b06208ff39c
是什么:蘋果基於http協議搞得一個協議
目的:實現視頻分片下載播放
步驟1:創建存放空間(七牛雲)
創建時訪問權限說明 https://developer.qiniu.com/kodo/kb/1363/public-space-and-private-space-is-introduced
步驟2:創建MP4-aa1存放空間&MP4-aa1-m3u8轉碼文件存放空間
步驟3:進MP4-aa1空間設置上傳自動轉碼任務
步驟4:https://www.pearvideo.com/ 打開梨視頻,下載然后上傳到webopenfather-aa1
注:會自動同步m3u8文件的
http://q3vx7f4gx.bkt.clouddn.com/cy.m3u8 臨時的m3u8文件
使用m3u8文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>videoJs</title> <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.min.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> </head> <body> <!-- 1.原生video標簽網頁端只支持MP4、OGG、WebM的視頻格式 2.直播的視頻格式一般為.m3u8,如果不行對video進行格外處理,可以采用video.js插件 3.video.js須配合第三方的videojs庫videojs-contrib-hls.js來播放.m3u8視頻 --> <section id="videoPlayer"> <video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster=""> <source src="m3u8視頻地址" type="application/x-mpegURL" id="target"> </video> </section> <script type="text/javascript"> var player = videojs('example-video', { "poster": "", "controls": "true" }, function() { this.on('play', function() { console.log('正在播放'); }); //暫停--播放完畢后也會暫停 this.on('pause', function() { console.log("暫停中") }); // 結束 this.on('ended', function() { console.log('結束'); }) }); </script> </body> </html>