Integrating Cloudflare player into angular 7 for Cloudflare stream

Question

Integrating Cloudflare player into angular 7 for Cloudflare stream

568 views Asked by user165242 At 16 February 2020 at 09:11

I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.

However, it is always a hit or a miss:

Out of 10 reloads, one loads the player.
But anytime I make a change to the <stream> tag, and angular re-compiles, the player is loaded. After this if I refresh the browser, it is a blank screen again.

The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:

In the index.html file:

<!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>

In the videoFile.component.ts:

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

Original Q&A

There are 1 answers

**user165242** · Answer 1 · 2020-02-16 10:46:52

Found a solution here: https://github.com/angular/angular/issues/13965

So everytime the component loads, the script is removed and reattached using ngOninit, like so:

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);

If anyone has any other solutions, please do let me know.

TechQA.

Integrating Cloudflare player into angular 7 for Cloudflare stream

There are 1 answers

Related Questions in CLOUDFLARESTREAM

Popular Questions

Popular Tags

Trending Questions