laravel - 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:帯域幅=100000

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

EXT-X-STREAM-INF:帯域幅=250000

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

EXT-X-STREAM-INF:帯域幅=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であることに注意してください