来自 Laravel 的视频显示问题 - Vuejs 来自 Laravel 方法的代码，我从中获取视频文件：来自 Vuejs 函数的代码，我将从中接收视频并将其显示在视频/源标签上：

如何解决来自 Laravel 的视频显示问题 - Vuejs 来自 Laravel 方法的代码，我从中获取视频文件：来自 Vuejs 函数的代码，我将从中接收视频并将其显示在视频/源标签上：

我正在使用 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 函数的代码，我将从中接收视频并将其显示在视频/源标签上：

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() 函数收到一些东西时，我试着看看我在响应中得到了什么。我在下面添加一个截图：

请帮我找到解决方案。

解决方法

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

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

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