如何在 angular 组件中嵌入视频？

Question

我有 angular 8 个应用程序，我可以嵌入 Youtube 视频。但是例如这个 url: https://vimeo.com/346340496/11432ab1db 是行不通的。那么我怎样才能让它与 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 或通用解决方案一起使用？

谢谢。

Answer 1

您必须扩展功能 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。

parseVimeoUrl 函数将从 https://vimeo.com/346340496/11432ab1db.

中提取 video_id

在这种情况下，此值为 346340496，并使用结构 https://player.vimeo.com/video/{video_url}

计算新的 url

有一个 Vimeo 开发者网站，里面有详细的解释。

source

示例嵌入 iframe

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

如何在 angular 组件中嵌入视频？

How to embed a video in angular component?

javascript

embed

angular