Видео js личное laravel хранилище + vue. js

Question

У меня проблема с доступом к личным видео с моего сервера через laravel, видео js и 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

, что является аналогичным откликом общедоступных видео при доступе.

У меня простое видео js Проигрыватель и пользовательский компонент 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>

Проблема заключается в том, что видео не загружается и не запускается, он просто создает много запросов, пытаясь получить видео безуспешно и Слои остаются мертвыми только на простом вращающемся колесе загрузки.

Может кто-нибудь посоветовать мне, как решить эту проблему? Мне нужно, чтобы некоторые видео были доступны в частном порядке после некоторых проверок в промежуточном программном обеспечении. Обратите внимание, что это SPA встроенные laravel и vue. js

Answer 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

URL-адрес запроса: localhost: 800 / video / episode / fetch / 060204b9-a084-44bf-86f2-cb8_0000_0000_0000_6400 *

et c.

Вот как я отредактировал метод контроллера:

    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');