CDN&對象存儲


概念

CDN是什么:名詞解釋不清,加快靜態資源訪問的技術

CDN原理:將靜態資源緩存到用戶所在城市

 

實現

步驟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);

 

hls協議 & video.js

hls協議介紹

https://www.jianshu.com/p/1b06208ff39c

 

是什么:蘋果基於http協議搞得一個協議

目的:實現視頻分片下載播放

 

video.js播放m3u8視頻

步驟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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM