Как встроить видео в angular компонент? - PullRequest
Новая
       19

Как встроить видео в angular компонент?

0 голосов
/ 22 апреля 2020

У меня есть приложение angular 8, и я могу вставлять видео с YouTube. Но, например, этот URL: https://vimeo.com/346340496/11432ab1db не будет работать. Так как мне заставить его работать также с vimeo или с универсальным c решением? Так что вы можете вставлять YouTube, Vimeo, другой формат ... и т. Д. c.

Вот мой код: 

private getVideoSafeUrl(url: string): SafeResourceUrl {
    const embedUrl = this.parseYoutubeUrl(url);
    const safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
      this.parseYoutubeUrl(embedUrl)
    );
    return safeUrl;
  }

  private parseYoutubeUrl(url: string): string {
    let returnUrl = url;
    const splitString = url.split('?');
    if (splitString.length > 1) {
      const baseUrl = splitString[0].replace('watch', 'embed');
      let videoId;
      const queryString = splitString[1];
      const newQueryString = queryString
        .split('&')
        .reduce((prev, cur) => {
          const entryArray = cur.split('=');
          if (entryArray[0] === 'v') {
            videoId = entryArray[1];
          } else {
            prev.push(cur);
          }
          return prev;
        }, [])
        .join('&');
      returnUrl = `${baseUrl}/${videoId}?${newQueryString}`;
    }
    if (url.indexOf('youtu.be') !== -1) {
      returnUrl = url.replace(/.*youtu\.be\/(.*)/g, (match, g1) => {
        return `https://youtube.com/embed/${g1}`;
      });
    }
    return returnUrl;
  }

и это шаблон этого: 

  <ng-container *ngIf="is('VideoDisplay')">
          <iframe
            *ngIf="videoUrl.value"
            class="video-iframe"
            type="text/html"
            [src]="getVideoSafeUrl(videoUrl.value)"
            frameborder="0"
            allowfullscreen
          ></iframe>
          <mat-form-field>
            <input
              matInput
              type="url"
              name="videoUrl"
              ngModel
              #videoUrl="ngModel"
              placeholder="Url of video"
              i18n-placeholder
              required
            />
            <mat-error>
              <app-element-edit-field-error
                [errors]="videoUrl.errors"
              ></app-element-edit-field-error>
            </mat-error>
          </mat-form-field>
        </ng-container>

поэтому мой вопрос: как мне заставить его работать с viemo или с универсальным c решением?

Спасибо.

1 Ответ

1 голос
/ 22 апреля 2020

Вы должны расширить функцию getVideoSafeUrl, чтобы включить видео Vimeo.

Рассмотрите этот подход 

private getVideoSafeUrl(url: string): SafeResourceUrl {
    let safeUrl = '';

    if(this.isVimeoUrl(url)) {
      safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
        this.parseVimeoUrl(url)
      );

      return safeUrl;
    }

    safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
      this.parseYoutubeUrl(url)
    );
    return safeUrl;
  }

isVimeoUrl Функция проверяет, является ли URL-адрес Vimeo.

* Функция 1009 *parseVimeoUrl будет извлекать video_id из https://vimeo.com/346340496/11432ab1db.

В этом случае это значение будет 346340496, и вычислять новый URL со структурой https://player.vimeo.com/video/{video_url}

Есть сайт разработчика Vimeo которые объясняют вещи в деталях.

source

Пример встраивания iframe 

 <iframe src="https://player.vimeo.com/video/346340496" width="320" height="200" frameborder="0" title="test" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
...