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>
CDN&对象存储的更多相关文章
- 阿里云对象存储OSS及CDN加速配置
目录 十大云存储服务商 1. 登陆阿里云官网,开通对象存储服务 OSS 2. 创建存储空间 3. 绑定自定义域名 4. 配置阿里云CDN加速 5. 购买阿里云免费SSL证书 6. 阿里云CDN配置HT ...
- 国内外免费对象存储和CDN加速额度
标题: 国内外免费对象存储和CDN加速额度 作者: 梦幻之心星 sky-seeker@qq.com 标签: [#免费,#对象存储,#CDN] 日期: 2022-01-29 国内对象存储和CDN加速 七 ...
- 七牛云免费对象存储，并绑定到cloudreve中
之前开通了腾讯云的对象存储COS并使用中,不过之前主要将它当作云盘使用,这两天再做博客系统时发现也可以将它作为网站的图库,这样对网站的访问效率也会提高. 今天了解到七牛云有免费的对象存储可以使用,于是 ...
- 阿里云对象存储服务，OSS使用经验总结，图片存储，分页查询
阿里云OSS-使用经验总结,存储,账号-权限,分页,缩略图,账号切换 最近项目中,需要使用云存储,最后选择了阿里云-对象存储服务OSS.总的来说,比较简单,但是仍然遇到了几个问题,需要总结下. 1.O ...
- C# .net Ueditor实现图片上传到阿里云OSS 对象存储
在学习的时候,项目中需要实现在Ueditor编辑器中将图片上传到云储存中,老师演示的是上传到又拍云存储,既然看了一遍,直接照搬不算本事,咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务. 现在云计算产 ...
- 架构师小跟班：教你从零开始申请和配置七牛云免费OSS对象存储（不能再详细了）
背景 之前为了练习Linux系统使用,在阿里云上低价买了一台服务器(网站首页有活动链接,传送门),心里想反正闲着也是闲着,就放了一个网站上去.现在随着数据越来越多,服务器空间越来越吃紧,我就考虑使用七 ...
- 腾讯云COS对象存储
一.腾讯云COS 腾讯云对象存储 COS 是一种存储海量数据的分布式存储服务.COS 提供了多种对象的存储类型:标准存储.低频存储.归档存储. 二.为什么要使用TA 便宜: 个人用户有6个月的免费使用 ...
- Docsify+腾讯云对象存储 COS，一键搭建云上静态博客
最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...
- 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置
标题: 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置 作者: 梦幻之心星 sky-seeker@qq.com 标签: [对象存储,图床,Backblaze,Shar ...
随机推荐
- 【智能合约】编写复杂业务场景下的智能合约——可升级的智能合约设计模式（附Demo）
智能合约的现状 以太坊在区块链上实现了智能合约的概念,用于:同质化通证发行(ERC-20).众筹.投票.存证取证等等,共同点是:合约逻辑简单,只是业务流程中的关键节点,而非整个业务流程.而智能合约想解 ...
- Qt Installer Framework翻译(3-4)
更新组件 下图说明了用于更新已安装组件的默认工作流程: 本节使用在macOS上运行的Qt 5维护工具为例,来演示用户如何更新已安装组件. 启动更新程序 用户启动维护工具时,将打开"简介&qu ...
- Windows Terminal入门
目录 0.引言 1.简易安装 2.初识WT 3.初识Settings 3.1全局配置 3.2每一个终端配置 3.3配色方案 3.4键位绑定 4.连接云服务器 5.连接WSL 6.玩转Emoji 0.引 ...
- Linux上部署web服务器并发布web项目
近在学习如何在linux上搭建web服务器来发布web项目,由于本人是linux新手,所以中间入了不少坑,搞了好久才搞出点成果.以下是具体的详细步骤以及我对此做的一些总结和个人的一些见解,希望对跟我一 ...
- ReactNative---setState与性能的平衡
setState用来更新RN的视图层显示,每一次setState操作都会更新整个 视图,于是对应的是性能消耗,在某些特殊情况下就会造成卡顿 app假死等问题: 因此个人使用setState中总结的原则 ...
- redis--->字符串和哈希对比
redis 的字符串和哈希对比 相同点和不同点 相同点: 首先是他们有很多效果类似的命令,比如set和hset,mset和hmset等等 大多数情况下使用字符串存储的场景使用hash也可以实现. 不同 ...
- node使用art-template的过滤器
引言 art-template过滤器在我看来,其实就是定义一个函数,模板字符串通过调用该函数处理相关的数据,得到相应的返回结果,显示在页面上.因此我们可以注册一个过滤器,处理相关的数据.这里使用nod ...
- 1759: 学生信息插入（武汉科技大学结构体oj）（已AC）
#include<stdio.h>struct student { long no; char name[9]; int score;} t;void input(struct stude ...
- C#中? 和 ??的区别
背景 最近在调试C#项目的时候,发现一个比较关于??的特殊用法,当时把我给惊到了,所以特意用这篇短短的笔记来记录一下我的解惑过程: 示例代码: showsomething(isNameNull ?? ...
- 今天更新IDEA后，我依旧要永久激活（支持2019.3.3版本）
起因 今天一早用IDEA写代码,看到有下角有提示更新,有点强迫症的我,就手欠的又点了下更新,结果尼玛悲剧了,居然许可证过期,IDEA过期了,如下图所示: 就想用下新功能,就这样对我,就给两天的使用时间 ...