Javascript 如何在角度分量中嵌入视频？

我有angular 8应用程序，可以嵌入Youtube视频。但例如，这个url：它将不起作用。那么，我怎样才能让它与vimeo或通用解决方案一起工作呢。这样你就可以嵌入youtube，vimeo，其他格式…等等

这是我的代码：

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或通用解决方案一起工作

---

谢谢。

您必须扩展函数

getVideoSafeUrl

，以包含vimeo视频

以这种方法为例

private getVideoSafeUrl（url:string）：SafeResourceUrl{
让safeUrl=''；
if（此.isVimeoUrl（url））{
safeUrl=this.domsanizer.bypassSecurityTrustResourceUrl(
this.parseVimeoUrl（url）
);
返回safeUrl；
}
safeUrl=this.domsanizer.bypassSecurityTrustResourceUrl(
this.parseYoutubeUrl（url）
);
返回safeUrl；
}

isVimeoUrl

函数检查url是否来自Vimeo

parseVimeoUrl

函数将从

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

在本例中，该值为

346340496

，并使用结构

https://player.vimeo.com/video/{video_url}

有一个Vimeo开发者网站，详细解释了事情

示例嵌入iframe

---

谢谢。我去看看。我还发现了类似的东西：从“ngx嵌入视频”导入{embeddevideoservice}；好吧，这取决于你。要么自己创建iframe并提供所有必要的数据，要么使用第三方组件/服务并在那里提供数据：）OK，但函数：isVimeoUrl将类似于函数：parseYoutubeUrl，但使用vimeo？

isVimeoUrl

将检查其有效的url类型，然后将其分支到

parseVimeoUrl

OK，但功能如何？伊斯维梅尔