Angular HTML 流的属性

Question

我正在尝试将来自 cloudflare stream 的视频添加到我的网站中。 cloudflare 提供的代码在 html 中运行，但是当我将代码粘贴到我的 angular 项目的 html 组件中时。我收到错误 -

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

在 html 中工作的代码如下所示

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

现在这真的是一个 POC，我自己也不是很了解 angular，只是想学习。有人可以指导我找到正确的 material 吗？

Answer 1

您可以执行以下步骤将 cloudflare 流添加到您的 Angular 组件：

1。将流标签添加到您需要的组件中。

app.component.html

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

2。现在你的AppModule（假设你的组件属于AppModule）应该是这样的：

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。现在将 cloudflare javascript 库添加到您的 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>

您可以找到有效的 stackblitz 演示 here

Angular HTML 流的属性

Angular attribute for HTML stream

video-streaming

cloudflare

angular

cloudflarestream