1

我在通过 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

4

1 回答 1

1

我发现了一个非常有趣的事实。我不得不更改我的控制器方法，因为它创建的许多请求试图根据 m3u8 播放列表文件获取视频的下一部分，但由于 URL 错误并且找不到文件而不能。请注意，URL 正在更改，但视频的每个后续部分。像这样：

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

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

请求网址：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);
}

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

在指定获取视频和下一部分的路径时也要非常小心。您想要以参数结尾并且之间没有任何固定单词的东西。

不正确：Route::get('/video/episode/{video}/fetch', 'VideoController@fetchPrivateVideo');

正确： Route::get('/video/episode/fetch/{video}', 'VideoController@fetchPrivateVideo');

于 2020-03-17T16:31:15.087 回答