实战视频流

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中读写文件方法的区别