0

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

错误：模板解析错误：'stream' 不是已知元素：1. 如果'stream' 是 Angular 组件，则验证它是否是此模块的一部分。2. 要允许任何元素添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。(" [错误->]

在 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，只是想学习。有人可以指导我找到我应该研究的正确材料吗？

4

1 回答 1

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

于 2019-05-22T10:45:08.837 回答