video标签无法加载视频，地址放入浏览器会直接下载的问题

最新推荐文章于 2023-10-11 12:37:04 发布

Mikaisa

最新推荐文章于 2023-10-11 12:37:04 发布

阅读量1.8k

点赞数 4

分类专栏：前端开发常见问题及处理方法文章标签：音视频数学建模 javascript

本文链接：https://blog.csdn.net/m0_58680712/article/details/131412490

版权

前端开发常见问题及处理方法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 问题描述

最近在开发过程中，遇到了一个小问题。后端给了我一个视频地址进行测试，但是我却发现这个地址直接放到video的src里去，视频是加载不出来的，会直接转一圈然后就没了。

请看图：

2. 问题分析

后来通过浏览器调试，我发现后端返回的视频其实是以stream也就是流的形式返回的,并不是通过常规的视频格式去返回文件

3. 解决方法

经过思考，我决定通过axios进行请求，然后把拿到的数据通过Blob对象变为文件，最后通过URL.createObjectUrl()创建一个预览地址，然后赋值给video标签的src就可以了。

下面是代码环节:

axios({
    method:'get',
    url: 'http://192.168.178.12:8091/epoint-web-zwfw/rest/auditattach/readAttach?attachguid=43bb4dd4-2aea-4e50-a25c-fb86b44ca1f0',
    responseType: 'blob',//这一步很重要,别忘了
}).then(res=>{
    console.log(res);
    let blob = new Blob([res.data],{type:res.data.type});
    let url = URL.createObjectURL(blob);
    document.querySelector('video').src = url;
});