Laravel 的视频显示问题 - Vuejs

Question

我正在使用 Laravel 和 Vuejs 开发一个网站。我正在尝试在页面上显示视频。我正在尝试使用 Laravel 获取视频并使用 Vuejs 显示视频，但视频没有出现，或者我在阅读视频或接收视频时一直出错。

我从中获取视频文件的 Laravel 方法的代码：

$data = Usercvvideos::select('id','userid','name','cv_video','upload_file_type')->where('userid', $id)->where('upload_file_type', $request->gettingFileType)->get();

$source_file = public_path()."/".$data[0]->cv_video;
$filesize = (string)(filesize($source_file));
$fileName = explode("/".$data[0]->userid."/", $data[0]->cv_video);
$originalFileName = $fileName[1];
        
header('Content-Type: video/mp4');
header('Content-Length: ' . $filesize);
header('Content-Disposition: attachment; filename="' . $originalFileName . '"');
header('Accept-Ranges: bytes');

readfile($source_file);

这里$data[0]->cv_video是路径，例如：uploads/100/abcd.mp4。

来自 Vuejs 函数的代码，我将从那里接收视频并将其显示在 video/source 标签上：

async getIntroData(){
    var gettingFileTypeByString={
        'gettingFileType': 'introVideo'
    };

    let returnValue;
    try{
        await axios.put('url', gettingFileTypeByString).then((response) => {
            returnValue = response.data;
        });
    } catch(e){
        console.log(e);
    }

    this.axiosGetIntroVideo = returnValue;
}

我也尝试从函数中返回returnValue，也从视频src调用函数：

let buffer = returnValue;
let videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' });
let url = window.URL.createObjectURL(videoBlob);
this.axiosGetIntroVideo = url;

视频标签类似于：

<video>
    <source :src="axiosGetIntroVideo">
</video>

我也试过这样：

<video>
    <source :src="getIntroData()">
</video>

但我总是失败。当我从getIntroData() 函数收到一些东西时，我试图看看我在响应中得到了什么。我在下面添加截图：

请帮我解决。

Answer 1

为什么不跳过所有的 Vue 和 Laravel？

let url = "uploads/100/abcd.mp4";
this.axiosGetIntroVideo = url;

让浏览器和 HTML 为您完成所有工作？