在React中使用Axios获取视频（Mp4格式）并以HTML视频显示

Question

我试图以字节流的形式从后端获取视频，并且我能够从后端获取视频。但我无法使用 axios 处理前端视频。我的代码是这样的

const [video, setVideo] = useState(null);

useEffect(() => {
         axios.get(/pathToVideo, {
                headers: {
                    Accept: 'video/mp4;charset=UTF-8'
                },
            }).then({
        const URL = window.URL || window.webkitURL;
        const url = URL.createObjectURL(new Blob([response.data], {type: "video/mp4"}));
        setVideo(url);
        })
})

我的 HTML 看起来像

            <video controls autoPlay loop muted>
                <source src={video} type="video/mp4"></source>
            </video>

该斑点正在创建一些链接，但该链接不包含任何内容，有人可以建议我哪里出错了吗？

Answer 1

我不使用 React-JS 或 Axios，但根据 blob 的经验，我会尝试这样的事情......

1. 首先设置 HTML，以便 axios 响应代码找到视频标签（它有空

   .src

   ）：

<video id="vidObj" width="500" height="360" controls loop muted autoplay>
<source src="" type="video/mp4">
</video>

2. 然后您可以将脚本添加到某处：

    useEffect( () => {
    axios.get( pathToVideo, { headers: { Accept: 'video/mp4;charset=UTF-8' } } )
    .then( response => {
            myUrl = (window.URL || window.webkitURL).createObjectURL( new Blob([response.data]) ); // response.data.data
            
            var myVid = document.getElementById('vidObj');
            myVid.setAttribute("src", myUrl);
            myVid.play(); //# test playback
            
            //setVideo(url); //# is this needed?
        })
    });

以上未经测试，但希望它能有所帮助。

备注：

• React 是否期望

  /pathToVideo

  而不仅仅是

  pathToVideo

  ？
  （其中

  pathToVideo = "https://somelink.etc";

  ）
• 如果

  response.data

  不起作用，也许可以尝试

  response.data.data

  。
• 我不确定

  source src={video}

  的作用，但如果可能的话，将

  .src

  清空，以便稍后由 axios blob 响应更新。

Answer 2

将其添加到标题下即可：

headers: {
    Accept: 'video/mp4;charset=UTF-8'
},
responseType: 'blob'

responseType 非常重要

Answer 3

返回获取(url) .then((response) => response.arrayBuffer());