如何在Angular（2及以上）中集成Vidyard嵌入式播放器？

问题描述 #

Vidyard门户提供的嵌入代码如下：

<!-- The script tag should live in the head of your page if at all possible -->
<script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async></script>
<!-- Put this wherever you would like your player to appear -->
<img
  style="max-width: 100%;"
  class="vidyard-player-embed"
  src="https://play.vidyard.com/Cse5Fqy1CpUWqYdtikKrFy.jpg"
  data-uuid="Cse5Fqy1CpUWqYdtikKrFy"
  data-v="4"
  data-type="inline"
/>

在基于TypeScript的Angular（2及以上版本）中集成该播放器时，仅能显示封面图片，无法加载视频，求可行解决方案。

解决方案步骤 #

1. 正确引入Vidyard脚本 #

Angular模板中直接插入<script>标签可能无法被正确解析加载，推荐两种引入方式：

• 全局配置引入：在angular.json的architect.build.options.scripts数组中添加脚本路径，构建时自动注入到页面头部：

  "scripts": [
    "https://play.vidyard.com/embed/v4.js"
  ]
  

• 组件动态引入：如果需要异步加载或按需加载，在组件的ngOnInit钩子中动态创建脚本标签：

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-vidyard-player',
    templateUrl: './vidyard-player.component.html'
  })
  export class VidyardPlayerComponent implements OnInit {
    ngOnInit(): void {
      const script = document.createElement('script');
      script.src = 'https://play.vidyard.com/embed/v4.js';
      script.type = 'text/javascript';
      script.async = true;
      document.head.appendChild(script);
    }
  }
  

2. 处理Angular DOM安全限制 #

Angular的DOM sanitizer会拦截未标记为安全的资源URL和属性，需手动处理播放器图片地址：

• 组件中注入DomSanitizer，将图片URL转换为安全资源：

  import { Component, OnInit } from '@angular/core';
  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  @Component({
    selector: 'app-vidyard-player',
    templateUrl: './vidyard-player.component.html'
  })
  export class VidyardPlayerComponent implements OnInit {
    playerImgUrl: SafeResourceUrl;
    playerUuid = 'Cse5Fqy1CpUWqYdtikKrFy';
  
    constructor(private sanitizer: DomSanitizer) {
      this.playerImgUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
        `https://play.vidyard.com/${this.playerUuid}.jpg`
      );
    }
  
    ngOnInit(): void {
      // 动态加载脚本（若未全局配置）
      const script = document.createElement('script');
      script.src = 'https://play.vidyard.com/embed/v4.js';
      script.async = true;
      document.head.appendChild(script);
  
      // 脚本加载完成后手动初始化播放器
      script.onload = () => {
        (window as any).VidyardV4?.api.loadPlayerByUuid(this.playerUuid);
      };
    }
  }
  

• 模板中使用安全URL和绑定属性：

  <img
    style="max-width: 100%;"
    class="vidyard-player-embed"
    [src]="playerImgUrl"
    [attr.data-uuid]="playerUuid"
    data-v="4"
    data-type="inline"
  />
  

3. 确保播放器初始化时机 #

Angular组件渲染和脚本加载可能存在时序差，需在DOM渲染完成后触发初始化：

• 在组件的ngAfterViewInit钩子中补充初始化逻辑（适配路由切换等场景）：

  ngAfterViewInit(): void {
    setTimeout(() => {
      (window as any).VidyardV4?.api.loadPlayerByUuid(this.playerUuid);
    }, 300); // 短延迟确保DOM完全渲染
  }
  

4. 排查环境限制 #

• 检查浏览器控制台是否有CORS或脚本加载错误，若存在需确认Vidyard后台是否添加了你的应用域名到允许列表。
• 确保浏览器未禁用第三方脚本或广告拦截插件，这类工具可能会阻止Vidyard脚本加载。

内容的提问来源于stack exchange，提问作者Dhatri Maddipati