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

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

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

У меня есть приложение angular 8. и я пытаюсь вставить видео vimeo.

Так что я имею для ts, как это: 

getVideoId(url, prefixes) {
    const cleaned = url.replace(/^(https?:)?\/\/(www\.)?/, '');
    for (let i = 0; i < prefixes.length; i++) {
      if (cleaned.indexOf(prefixes[i]) === 0) {
        return cleaned.substr(prefixes[i].length);
      }
    }
    return undefined;
  }

  getVimeoId(url) {
    return this.getVideoId(url, ['vimeo.com/', 'player.vimeo.com/']);
  }

 getVideoSafeUrl(url: string): SafeResourceUrl {

    const embedUrl = this.parseYoutubeUrl(url);
    const safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
      this.parseVimeo(embedUrl));

   return safeUrl;
  }

и шаблон, как это: 

 <iframe
            *ngIf="videoUrl.value"
            class="video-iframe"
            type="text/html"
            [src]="getVideoSafeUrl(videoUrl.value)"
            frameborder="0"
            allowfullscreen
          ></iframe>

Но так, когда Я пытаюсь вставить видео Vimeo: https://vimeo.com/346340496/11432ab1db

Я получаю эту ошибку: 

VM7131 vendor.js:76269 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '346340496'
Error: Cannot match any routes. URL Segment: '346340496'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2432)
    at CatchSubscriber.selector (router.js:2413)
    at

Так что я должен изменить?

Спасибо вы

1 Ответ

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

Попробуйте не: 

https://vimeo.com/346340496/11432ab1db

, но в формате ниже url при использовании в качестве [src] в iframe

https://player.vimeo.com/video/346340496

Вам необходимо написать синтаксический анализатор соответственно, что-то как 

  function  parseVimeo(url) {
    const re = /\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i;
    const matches = re.exec(url);
    return matches && "https://player.vimeo.com/video/"+matches[1];
  }

Убедитесь, что вы проверили его для всех URL-адресов, а не только для https://vimeo.com/346340496/11432ab1db. Поместите правильные пользовательские сообщения, когда также есть некоторые неизвестные URL

...