将后台二进制数据转换为blob,并转换为 src="blob:http://" 链接

后台code

使用express 搭建的后台

// 加载 express
const express = require('express')
// 加载 fs
const fs = require('fs')
// 创建 app
const app = express()
// 静态文件托管
app.use(express.static('public'))
// 主页面请求
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})
app.post('/url', function(req, res) {
  // 读取文件
  fs.readFile(__dirname + '/public/test.mp4', function(err, data) {
    if (err) {
      console.log(err.stack)
      return
    }
    // 向前台发送二进制数据
    res.send(data)
    res.end()
  })
})
app.listen(8080, function() {
  console.log('Server is running……')
})

前台code:

'use strict'
window.onload = function (evt) {
  // 获取元素
  let video = document.querySelector('.video')
  const xhr = new XMLHttpRequest()
  xhr.open('post', '/url', true)
  // 请求类型 bufffer
  xhr.responseType = 'arraybuffer'
  xhr.onload = function () {
    if (xhr.status === 200 || xhr.status === 304) {
      // 将后台 buffer 转换为 blob
      let blob = new Blob([xhr.response], {type: 'video/*'})
      // 创建blob链接
      video.src = URL.createObjectURL(blob)
    }
  }
  xhr.send()
}

结果: