时间戳

首页 > 解决方案 > 如何在角度分量中嵌入视频？

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

问题描述

我有 angular 8 应用程序，我可以嵌入 Youtube 视频。但例如这个网址：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 或通用解决方案一起使用？

谢谢你。

标签： javascriptangularembed

解决方案

您必须扩展功能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函数将从中提取 video_id https://vimeo.com/346340496/11432ab1db。

在这种情况下，此值为346340496，并计算具有结构的新 urlhttps://player.vimeo.com/video/{video_url}

有 Vimeo 开发者网站详细解释了事情。

资源

示例嵌入 iframe

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

推荐阅读