video.js的动态切换视频源问题：https://blog.csdn.net/elephant230/article/details/97528084
页面刷新：https://blog.csdn.net/weixin_43885417/article/details/91310674
视频流好处：
边加载便播放
防盗链：
避免video标签被盗取src链接，避免被站外被恶意访问视频资源
先实现了视频流再实现防盗链。
视频流实现的关键是，视频文件的流式读取。参考了这篇文章https://blog.csdn.net/liuyaqi1993/article/details/76560401
前端方面：
把视频请求放在video标签src
觉得src这个标签挺神奇的。不仅封装了跨域，也能让后台自动不断发送文件流
后端方面：
node提供了相关读取文件的api
主要有同步读写文件、异步读写文件、读写文件流
之前试过边读边发，网页接收起来容易崩溃,就像下面那样
reader.on('data',function(data){ // 读文件过程
reader.pipe(res) //从一个文件赋值数据到另一个文件
});
正解的方法，在文章一开始的链接里面
写入文件
let fs = require('fs')
let state = fs.statSync(path)
let fileSize = state.size //总文件大小
let reader = fs.createReadStream(path, { start, end }) // 读取指定字节
reader.pipe(res) // 可以直接使用pipe方法，返回数据
// 就像水管，把reader中拿到的数据流给到res响应中
let writer = fs.createWriteStream("name") // 最后写成的文件名
reader.on('data',function(data){ // 读文件过程
writer.write(data); //从一个文件赋值数据到另一个文件
}）
// 简便写法
reader.pipe(writer) // 可以直接使用pipe方法，返回数据
reader.on('end',function(data){ // 文件读取完成
//do something
});
// 监听流的开启和关闭，只执行一次
reader.once('close', function () {
console.log('可读流关闭了');
})
reader.once('open',function(){
console.log('可读流打开了');
})
题外话
使用文件流读出来的data数据,默认是buffer类型的
当我们进行data+=chunk操作的时候，默认调用了toString()方法,
这也是会引起读取中文乱码的原因。toString()默认以utf-8编码。一个中文字在utf-8中占3个字节。比如
当我们规定，每次限制读取buffer的长度为11，去读'床前明月光'这句话时，月的三个字符就被分开读取，不能被连在一起解读，所以会出现床前明*光，形成乱码。
let reader = fs.createReadStream(path, { highWaterMark:11})
所以正确拼接buffer的方法是
var chunks = []
var size = 0
reader.on('data',function(data){ // 读文件过程
chunks.push(data)
size+=data.length
});
reader.on('end',function(){ // 读文件过程
var buf = Buffer.concat(chunks,size) // 选择要进行拼接的长度
size+=data.length
});
关于部分传输：
了解了一些请求头
Range: bytes=start-end
//表示请求的字节部分
设置请求头，并且需要跨域时，需要在服务端设置允许跨域的源，头部，方法等等
//设置跨域请求
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , Range, yourHeaderFeild');
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
if (req.method == 'OPTIONS') {
res.sendStatus(200);//让options尝试请求快速结束
} else {
next();
}
});
了解了一些状态吗响应头
部分传输需要的响应头
206：表示客户端只想要请求资源的部分数据
如果客户端发出想要部分内容的请求，但是客户端无法满足，则会返回200，返回全部内容。
第一种：使用content-*头
let head = {
'Content-Range': `bytes ${start}-${end}/${fileSize}`, //发送的字阶段
'Accept-Ranges': 'bytes', //发送单位：字节
'Content-Length': chunksize, // 传输的字节长度
'Content-Type': 'video/mp4', // 发送类型
}
res.writeHead(200, head)
第二种：使用Transfer-Encoding: Chunk
它和content-*头不同的是，content-*头必须明确发送字节的长度，当我们不能明确发送的长度时，则可以使用Transfer-Encoding
具体使用方法：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Transfer-Encoding
关于content-type,主要有以下几类,/后面是文件类型
Application、Text、Video、Audio、Video、Image
注意：application/octet-stream主要用于文件流的传输
那么我们就来试一试把第一次请求的部分内容给到mediaSource之后，然后喂给src属性，他是否会自动获取后面的内容。
appendBuffer()参数对象必须是ArrayBuffer类型的
但是后端文件流读出来的数据
这个过程中看到的好博客
HTTP消息头（HTTP headers）－常用的HTTP请求头与响应头
nodeJS中读写文件方法的区别
网友评论