Angular attribute for HTML stream

Question

I am trying to add a video from cloudflare stream into my website. The code that cloudflare gives runs in html but when I paste the code in the html component of my angular project. I am getting the error -

Error: Template parse errors: 'stream' is not a known element: 1. If 'stream' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->]

The code that works in html looks like this

    <stream src="6aaee8579a7a************" autoplay muted preload></stream>
    <script data-cfasync="false" defer="" type="text/javascript" src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=6aaee8579a7a************"></script>

Now this is really a POC, and I myself dont really know angular, just trying to learn. Could someone please direct me to the correct material that I should look into to sort this?

Answer 1

You can do the following steps to add cloudflare stream to your Angular component:

1 . Add the stream tags to your required component.

app.component.html

<stream src="5d5bc37ffcf54c9b82e996823bffbb81" controls></stream>

2 . Now your AppModule (assuming your component belongs to AppModule ) should be like this:

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  schemas: [ NO_ERRORS_SCHEMA ], // <- You need to add this line
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3 . Now add the cloudflare javascript library to your index.html

<html>
  <body>
    <my-app>loading</my-app>
  </body>

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

You can find the working stackblitz demo here

Angular attribute for HTML stream

Question

1 answers

solution1
1 ACCPTED 2019-05-22 10:45:08

Angular attribute for HTML stream

Question

1 answers

solution1 1 ACCPTED 2019-05-22 10:45:08

solution1
1 ACCPTED 2019-05-22 10:45:08