从 Laravel 到 Vuejs 的视频接收问题 [英] Video receiving problem from Laravel to Vuejs

问题描述

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

• I stored the video link in the database and stored the video in the public folder. a folder description is something like public/uploads/100/abcd.mp4.

我正在通过 Laravel 方法读取此视频并从 Vuejs 接收此视频，并尝试在 标签中显示该视频.我还尝试使用直接链接显示视频，例如 .

I am reading this video from a Laravel method and receiving this video from Vuejs and trying to show the video in the <video> tag. I also tried to show the video using the direct link, something like <source src="/uploads/100/abcd.mp4">.

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

But this way I can only show the video but the video progress bar is not working and currentTime cannot be set this way because I tried to set it.

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

Maybe I need to receive the video in Vuejs using a different way. Please give me a solution to this. I am adding the Laravel method and Vuejs method here, which way i tried to receive the video, I don't know if it is the correct way to receive the video. Please give me the solution if you have any.

视频标签

```
    <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 中，我尝试以这种方式获取视频，但无法正常工作.请帮我获取视频.我卡住了.

• This way in Vuejs I tried to get the video but it is not working. please help me to get the video. I am stuck.

  推荐答案

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

  You should just record to db url where you uploaded file. Then just set that string to src of video. Also you'll need control attribute in video tag.

  这篇关于从 Laravel 到 Vuejs 的视频接收问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！