Videojs私有laravel存储+ vue.js

Question

我在通过laravel，videojs和vuejs从服务器访问私有存储的视频时遇到问题。

这是我的控制器方法：

 public function fetchPrivateVideo($video)
{

    $video_path = '/private/courses/episodes/' . $video . "/" . $video . '.m3u8';
    // $video_path = '/private/courses/episodes/' . $video . '.mp4';

    if (!Storage::disk('local')->exists($video_path)) {
        abort(404);
    } else {
        $local_path = config('filesystems.disks.local.root') . DIRECTORY_SEPARATOR . $video_path;

        return response()->file($local_path);
    }
}

例如，此方法的响应是：

EXTM3U

EXT-X-STREAM-INF：BANDWIDTH = 100000

060204b9-a084-44bf-86f2-c1128dd6bcb9_100.m3u8

EXT-X-STREAM-INF：BANDWIDTH = 250000

060204b9-a084-44bf-86f2-c1128dd6bcb9_250.m3u8

EXT-X-STREAM-INF：BANDWIDTH = 500000

060204b9-a084-44bf-86f2-c1128dd6bcb9_500.m3u8

与访问时公开存储的视频的响应相同。

我有简单的videojs播放器和自定义vuejs组件：

    export default {
  props: ["episode", "course", "author"],
  data() {
    return {
      videoLoaded: true,
      videoOptions: {
        autoplay: false,
        controls: true,

        sources: [
          {
            src: `/video/episode/${this.episode.path}/fetch`,
            type: "application/x-mpegURL"
          }
        ]
      }
    };
  },
  components: {
    appComments,
    VideoPlayer
  }
};

然后，上述组件中的数据将在通用视频播放器组件中使用，如下所示：：

   <template>
  <div>
    <video
      ref="videoPlayer"
      class="video-js vjs-big-play-centered"
      controls
      preload="auto"
      width="640"
      height="268"
      data-setup='{"fluid": true}'
    ></video>
  </div>
</template>

<script>
import videojs from "video.js";

export default {
  name: "VideoPlayer",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      this.options
      //   function onPlayerReady() {
      //     console.log("onPlayerReady", this);
      //   }
    );
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
<style src="video.js/dist/video-js.min.css"></style>

问题是视频没有被加载并且无法启动，它只是创建了许多尝试以失败的方式获取视频的请求，而播放器仅停留在一个简单的旋转加载轮上就死定了。

有人可以建议我如何处理此问题吗？在中间件中进行一些检查后，我需要私下访问一些视频。请注意，这是在laravel和vue.js中内置的SPA

Answer 1

我发现了一个非常有趣的事实。我必须更改控制器方法，因为它创建的许多请求都试图基于m3u8播放列表文件来提取视频的下一部分，但是由于URL错误并且找不到文件而无法这样做。请注意，网址已更改，但视频的每个后续部分都已更改。像这样：

初始视频获取：请求网址：localhost：800 / video / episode / fetch / 060204b9-a084-44bf-86f2-c1128dd6bcb9

以下网址：请求网址：localhost：800 / video / episode / fetch / 060204b9-a084-44bf-86f2-c1128dd6bcb9_500.m3u8

请求URL：localhost：800 / video / episode / fetch / 060204b9-a084-44bf-86f2-c1128dd6bcb9_500_00000.ts

等

这是我编辑控制器方法的方式：

    public function fetchPrivateVideo($video)
{
    $arr = explode("_", $video, 2);
    $first = $arr[0];

    $contains = \Str::contains($video, ['.m3u8', 'ts']);

    if ($contains) {
        $video_path = '/private/courses/episodes/' . $first . "/" . $video;
    } else {
        $video_path = '/private/courses/episodes/' . $first . "/" . $video . '.m3u8';
    }

    if (!Storage::disk('local')->exists($video_path)) {
        abort(404);
    } else {
        $local_path = config('filesystems.disks.local.root') . DIRECTORY_SEPARATOR . $video_path;

        return response()->file($local_path);
}

基本上，我正在修改路径，因为一旦获取了视频的初始部分，您就需要修改网址，以便其获取下一部分。

[指定获取视频和后续部分的路径时也要非常小心。您需要以参数结尾并且之间没有固定单词的内容。

不正确：路线：： get（'/ video / episode / {video} / fetch'，'VideoController @ fetchPrivateVideo'）;

正确：路线：： get（'/ video / episode / fetch / {video}'，'VideoController @ fetchPrivateVideo'）;