Как воспроизвести локальный видеофайл с помощью videogular2 - PullRequest
Новая
       25

Как воспроизвести локальный видеофайл с помощью videogular2

0 голосов
/ 12 июня 2018

Как я могу воспроизвести локальный видеофайл с помощью Videogular.Я знаю, что по соображениям безопасности пользователь должен вручную выбрать файл.Однако я не знаю, как установить источник videogular для выбранного файла.

Я использую ng2-file-input, чтобы получить ссылку на файл.Однако установка этой ссылки на файл не работает в videogular.

app.component.ts 

export class AppComponent {
  api: VgAPI;
  mediaSrc: string;
  mediaType: string;

  public onAction($event) {
    const media = $event.currentFiles[0];
    this.mediaSrc = URL.createObjectURL(media);
    this.mediaType = media.type;
    this.api.play();
  }

  public onPlayerReady(api: VgAPI) {
    this.api = api;
  }
}

app.component.html 

<ng2-file-input (onAction)="onAction($event)"></ng2-file-input>
<vg-player (onPlayerReady)="onPlayerReady($event)">
  <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
      <source [src]="mediaSrc" [type]="mediaType">
  </video>
</vg-player>

Ответы [ 3 ]

0 голосов
/ 19 июля 2018

Вам также необходимо обойти защиту, используя DomSanitizer

export class AppComponent 
{
     constructor(private domSanitizer: DomSanitizer){}

     //...
     let URL = window.URL || window.webkitURL;
     const objectURL = URL.createObjectURL(media);
     this.mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(objectURL);
0 голосов
/ 26 октября 2018

Я знаю, что это старая ветка, но я сам сталкивался с этим и хотел опубликовать решение для других:

Если вы будете следовать этому StackOverflow ответу , вы получите именно то, чтоты хочешь сделать.И в случае разрыва связи в будущем они говорят следующее:

Можно воспроизводить локальный видеофайл.

Когда файл выбирается с помощью элемента ввода:

  1. Событие 'change' инициировано
  2. Получить первый объект File из файла input.files
  3. Создать URL-адрес объекта, который указывает на объект File
  4. Установите URL объекта для свойства video.src
  5. Откиньтесь назад и наблюдайте:)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/

В основном один разВаш файл выбран, передайте собственный объект файла в URL.createObjectUrl(myNativeFileObj).Возвращаемое значение этой функции - это URL, который вы должны передать Videogular2 как src.

0 голосов
/ 18 июля 2018

Поскольку Angular использует веб-пакет (если вы создали свое приложение с помощью Angular-CLI, ваш проект будет автоматически создан с помощью веб-пакета), вы можете загрузить файл, как показано по следующей ссылке: Как загрузить локальное видео в Reactиспользуя веб-пакет?

Однако я не уверен на 100%, будет ли это работать с videogular2, принимая во внимание следующий комментарий: https://github.com/videogular/videogular2/issues/581

Вы также можете использовать вебсервер для доставки файлов, например NginX.Прямо в доступной по умолчанию конфигурации сайтов (используя NginX) вы можете установить в качестве root путь к файлам, которые вы хотите воспроизвести, таким образом, вы сможете найти их в localhost.

...