概念

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>

CDN&对象存储的更多相关文章

  1. 阿里云对象存储OSS及CDN加速配置

    目录 十大云存储服务商 1. 登陆阿里云官网,开通对象存储服务 OSS 2. 创建存储空间 3. 绑定自定义域名 4. 配置阿里云CDN加速 5. 购买阿里云免费SSL证书 6. 阿里云CDN配置HT ...

  2. 国内外免费对象存储和CDN加速额度

    标题: 国内外免费对象存储和CDN加速额度 作者: 梦幻之心星 sky-seeker@qq.com 标签: [#免费,#对象存储,#CDN] 日期: 2022-01-29 国内对象存储和CDN加速 七 ...

  3. 七牛云免费对象存储，并绑定到cloudreve中

    之前开通了腾讯云的对象存储COS并使用中,不过之前主要将它当作云盘使用,这两天再做博客系统时发现也可以将它作为网站的图库,这样对网站的访问效率也会提高. 今天了解到七牛云有免费的对象存储可以使用,于是 ...

  4. 阿里云对象存储服务，OSS使用经验总结，图片存储，分页查询

    阿里云OSS-使用经验总结,存储,账号-权限,分页,缩略图,账号切换 最近项目中,需要使用云存储,最后选择了阿里云-对象存储服务OSS.总的来说,比较简单,但是仍然遇到了几个问题,需要总结下. 1.O ...

  5. C# .net Ueditor实现图片上传到阿里云OSS 对象存储

    在学习的时候,项目中需要实现在Ueditor编辑器中将图片上传到云储存中,老师演示的是上传到又拍云存储,既然看了一遍,直接照搬不算本事,咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务. 现在云计算产 ...

  6. 架构师小跟班：教你从零开始申请和配置七牛云免费OSS对象存储（不能再详细了）

    背景 之前为了练习Linux系统使用,在阿里云上低价买了一台服务器(网站首页有活动链接,传送门),心里想反正闲着也是闲着,就放了一个网站上去.现在随着数据越来越多,服务器空间越来越吃紧,我就考虑使用七 ...

  7. 腾讯云COS对象存储

    一.腾讯云COS 腾讯云对象存储 COS 是一种存储海量数据的分布式存储服务.COS 提供了多种对象的存储类型:标准存储.低频存储.归档存储. 二.为什么要使用TA 便宜: 个人用户有6个月的免费使用 ...

  8. Docsify+腾讯云对象存储 COS，一键搭建云上静态博客

    最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...

  9. 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置

    标题: 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置 作者: 梦幻之心星 sky-seeker@qq.com 标签: [对象存储,图床,Backblaze,Shar ...

随机推荐

  1. 函数组合的 N 种模式

    随着以函数即服务(Function as a Service)为代表的无服务器计算(Serverless)的广泛使用,很多用户遇到了涉及多个函数的场景,需要组合多个函数来共同完成一个业务目标,这正是微 ...

  2. IDEA中springboot的热部署

    在pom.xml文件中添加依赖 <!--添加热部署--> <dependency> <groupId>org.springframework.boot</gr ...

  3. Spring（三）核心容器 - ApplicationContext 上下文启动准备

    目录 前言 正文 第一步:prepareRefresh 第二步:obtainFreshBeanFactory 第三步:prepareBeanFactory 第四步:postProcessBeanFac ...

  4. selenium之窗口滚动

    在这里和大家分享一下,selenium里面常用于处理窗口滚动的方法. location_once_scrolled_into_view 一般用于定位窗口底部元素.将窗口拉到最底部. window.sc ...

  5. Mysql一分钟定位 Next-Key Lock，你需要几分钟

    连接与线程 查看连接信息 show processlist +----+------+------------------+------+---------+------+----------+--- ...

  6. 微软的github 上面 有 Docker.DotNet 嗯 作为 菜 只有欣赏的额

    .NET Client for Docker Remote API step one 需要下载的 猛戳 Docker.DotNet

  7. Vmware上安装Linux（centos7）图文教程

    Vmware上安装Linux(centos7)图文教程   一.准备安装文件(vmware && centos7 镜像) 1.下载  vmware workstations :链接: ...

  8. Cassandra2.2.10安装过程

    1. 2.安装JVM 3.OS环境配置: 关闭防火墙:service iptables stop vi /etc/sysctl.conf vm.zone_reclaim_mode=0 vm.max_m ...

  9. [C语言学习笔记一]基本构架和变量

    基本构架 所有的C程序都有一个 main 函数.其后包含在大括号中的是 main 函数的内容. main函数是程序的入口,程序运行后,先进入 main 函数,然后一次执行 main 函数体中的语句. ...

  10. Linux(Centos)安装tomcat并且部署Java Web项目

    步骤一.下载安装包 a.   下载tomcat linux安装包,地址:http://tomcat.apache.org/download-80.cgi , 我们下载的版本是8.0,下载方式如图: b ...