Атрибут Angular для потока HTML

Я пытаюсь добавить видео из потока cloudflare на свой сайт. Код, который дает cloudflare, работает в html, но когда я вставляю код в html-компонент моего проекта angular. Я получаю сообщение об ошибке -

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, просто пытаюсь научиться. Может кто-нибудь, пожалуйста, направьте меня к правильному материалу, который я должен изучить, чтобы разобраться с этим?

stream это какой-то новый тег HTML? Angular не знает этот тег и выдает ошибку. Вы можете либо изменить имя тега, либо создать простой компонент с помощью селектора stream, либо добавить NO_ERRORS_SCHEMA в @NgModule.schemas, как указано в ошибке.

yurzui 22.05.2019 11:56

Полагаю, что так? в конце концов, код работает нормально, когда я создаю обычный HTML-файл. @yurzui

Rick Roy 22.05.2019 11:58

Не могли бы вы поделиться спецификацией этого тега?

yurzui 22.05.2019 11:58

Вот вся схема, в которой Angular использует github.com/angular/angular/blob/…. Она включает теги <audio> и <video>, но не <stream>

yurzui 22.05.2019 12:01

@RickRoy, вы пытались заменить <stream></stream> на <video></video>, чтобы увидеть, исчезла ли ошибка и работает ли поток?

asimhashmi 22.05.2019 12:06

@AsimHashmi <видео></видео> не работает

Rick Roy 22.05.2019 12:12

@yurzui похоже, что <stream> — это то, что использует cloudflare js для вставки видео. Я предполагаю, что путь вперед для меня - создать свой собственный пользовательский компонент.

Rick Roy 22.05.2019 12:13
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
7
562
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. Теперь добавьте библиотеку javascript cloudflare в свой 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>

Вы можете найти рабочую демонстрацию стекблицздесь

Другие вопросы по теме