从 Laravel 到 Vuejs 的视频接收问题

编程问答 2022-04-25

问题描述

  • 我将视频链接存储在数据库中，并将视频存储在 public folder 中。文件夹描述类似于 public/uploads/100/abcd.mp4。

  • 我正在通过 Laravel 方法读取此视频并从 Vuejs 接收此视频并尝试在 <video> 标签中显示该视频。我还尝试使用直接链接显示视频，例如 <source src="/uploads/100/abcd.mp4">。

  • 但是这样我只能显示视频，但是视频进度条不起作用，并且因为我试图设置它而无法设置 currentTime。

  • 也许我需要使用不同的方式在 Vuejs 中接收视频。请给我一个解决方案。我在这里添加了Laravel方法和Vuejs方法，我尝试接收视频的方式，不知道是否是接收视频的正确方式。如果有的话，请给我解决方案。

视频标签

```
    <video>
       <source v-bind:src="axiosGetIntroVideo">
    </video>
```
  • 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');
    
    return readfile($source_file);

  • Vuejs 方法中我调用了此处编写的 Laravel 方法并尝试接收视频并尝试在 <video> 标签中显示视频

    async getIntroData(){
        var gettingFileTypeByString={
            'gettingFileType': 'introVideo'
        };
        let returnValue;
        try{
            await axios.put('url' + this.userId,gettingFileTypeByString,{
                responseType: "arraybuffer",headers: {
                    "Accept": "video/mp4",},}
                ).then((response) => {

                console.log(response);
                returnValue = response.data;
            });

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

  • 在 Vuejs 中，我尝试以这种方式获取视频，但无法正常工作。请帮我获取视频。我卡住了。

解决方法

您应该只记录到您上传文件的 db url。然后将该字符串设置为视频的 src。您还需要视频标签中的控制属性。

html5-videolaravellaravelvideovideovue.js