二进制音频视频转换为视频流播放及图片的显示

最新推荐文章于 2024-12-21 01:42:38 发布

weixin_45455621

最新推荐文章于 2024-12-21 01:42:38 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/weixin_45455621/article/details/108991140

版权

需求：因为视频，音频，图片没有实体文件的存储，后台返过来，都是二进制，即视频及音频流播放，图片可以返回base64进行展示…

Blob对象：二进制类型的对象

看到一篇很好文章，讲的是blob：JS中的Blob对象

ArrayBuffer：它是用来表示通用的、固定长度的原始二进制数据缓冲区，它是一个字节数组，不能直接操作，可以通过类型数组对象来操作它~~

处理之后的路径在下方==
blob:http://localhost:8080/766d***********4fdf-914a-5*******

在这里插入图片描述

请求数据

  let parmise = {
     // 这里是请求参数
  };
  const xhr = new XMLHttpRequest();
  const _that = this;
  xhr.open("post", PATH + "/url(请求路径)", true);
  // 请求类型 arraybuffer，这里一定是arraybuffer
  xhr.responseType = "arraybuffer";
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onload = function() {
    if (xhr.status === 200 || xhr.status === 304) {
      console.log(xhr.response); // 二进制数据缓冲区
      let blob = new Blob([xhr.response], { type: "video/*" });
      _that.videoUrl = URL.createObjectURL(blob); // 获取URL
    }
  };
  xhr.send(JSON.stringify(parmise));