将 Cloudflare 播放器集成到 Cloudflare 流的 Angular 7 中答案

【问题标题】：Integrating Cloudflare player into angular 7 for Cloudflare stream将 Cloudflare 播放器集成到 Cloudflare 流的 Angular 7 中
【发布时间】：2020-02-16 18:46:52
【问题描述】：

我正在尝试让 cloudflare 流以角度工作。我已经尝试过这里给出的解决方案：Angular attribute for HTML stream.

然而，它总是一个成功或失败：

在 10 次重新加载中，有一次加载了播放器。
但是每当我做一个更改为<stream> 标签，然后重新编译角度，播放器是加载。在此之后，如果我刷新浏览器，它是一个空白屏幕再次。

显示视频的组件在树的深处，并且该组件属于延迟加载的模块：

在 index.html 文件中：

<!doctype html>
<html lang="en">

<head>
...............

</head>

<body>
  <app-root></app-root>

</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>

</html>

在videoFile.component.ts：

<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>

【问题讨论】：

添加 :embed.cloudflarestream.com 被调用。但是，没有拨打 videodelivery.net 的电话。

标签： cloudflarestream

【解决方案1】：

在这里找到解决方案：https://github.com/angular/angular/issues/13965

因此，每次加载组件时，都会使用 ngOninit 删除并重新附加脚本，如下所示：

document.getElementById("video_embed").remove();
      let testScript = document.createElement("script");
      testScript.setAttribute("id", "video_embed");
      testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
      document.body.appendChild(testScript);

如果有人有其他解决方案，请告诉我。

【讨论】：