从 Laravel 到 Vuejs 的视频接收问题

Question

• 我将视频链接存储在数据库中，并将视频存储在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 中，我试图获取视频，但它无法正常工作。请帮我获取视频。我被卡住了。

Answer 1

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