时间戳

首页 > 解决方案 > 将 Cloudflare 播放器集成到 Cloudflare 流的 Angular 7 中

cloudflarestream - 将 Cloudflare 播放器集成到 Cloudflare 流的 Angular 7 中

问题描述

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

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

  1. 在 10 次重新加载中，有一次加载播放器。
  2. 但是每当我对<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>

标签： cloudflarestream

解决方案

在这里找到了解决方案：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);

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

推荐阅读