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

【问题标题】：Fetching Video(Mp4 format) Using Axios in React and displaying in HTML video在 React 中使用 Axios 获取视频（Mp4 格式）并以 HTML 视频显示
【发布时间】：2021-06-18 07:37:53
【问题描述】：

我试图以字节流的形式从后端获取视频，但我能够从后端获取视频。但我无法使用 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>

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

【问题讨论】：

能否获取到服务器的视频路径？并将其添加为来源？
是的，这个想法可行，但我们的要求需要获取视频作为前端
后端应该将视频的源网址作为字符串返回，您应该添加它

标签： reactjs axios video-streaming html5-video blob

【解决方案1】：

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

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

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

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

    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 响应对其进行更新。

【讨论】：