Как добавить файл JS плагина Swarmify Video Player в Angular? - PullRequest
Новая
       35

Как добавить файл JS плагина Swarmify Video Player в Angular?

0 голосов
/ 12 марта 2019

Я занимаюсь разработкой Angular Web App.

Я использую веб-плеер Swarmify для воспроизведения видео

Но они предоставили файл JS, который должен быть включен в тег Script, например: 

<script data-cfasync="false">
    var swarmoptions = {
        swarmcdnkey: "f4d864ed-5671-486f-b371-1b5cb3336170",
        autoreplace: {
            youtube: false
        }
    };
</script>
<script data-cfasync="false" src="https://assets.swarmcdn.com/cross/swarmdetect.js"></script>

Для воспроизведения видео 

  <smartvideo   style="min-width: 100%; min-height: 100%;" src="http://www.example.com/sample.mp4" width="600" height="600" controls></smartvideo>

Но я не знаю, как добавить этот плагин типа JS

Шаги, которые я сделал

Я добавил теги этого скрипта на страницу index.html приложения

После этого я добавил SmartVideo tag в Video-Page.Component.html .., я получил следующую ошибку: 

Swarmify - swarmdetect.js: Document Write Succeeded swarmdetect.js:1:553

Error: Template parse errors:
'smartvideo' is not a known element:

1. If 'smartvideo' 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. (" <div class="single-video"> [ERROR ->]<smartvideo src="https://videos.fetnation.com/file/videostream/5c4c5774450d2923589c09a6_The Dark Kn"): ng:///AppModule/VideoPageComponent.html@18:10

Поэтому я использовал другой метод:

Я добавил эти строки в videopage.component.ts 

ngOnInit() {

    let s2 = this._renderer2.createElement('script');
    s2.type = 'text/javascript';
    s2.src =  'https://assets.swarmcdn.com/cross/swarmdetect.js';
    this._renderer2.appendChild(this._document.body, s2);
  }
  ngAfterViewInit ()
  {
    let s = this._renderer2.createElement('script');
    s.type = 'text/javascript';
    s.text = ` var swarmoptions = {
      swarmcdnkey: "f4d864ed-5670-486f-b371-1b5cb3336170",
      autoreplace: {
          youtube: false
      }
  };`;

  }

Но все же я получаю вышеупомянутую ошибку, что тег smartvideo не определен

Я также не добавил схему ошибок в Video-page.component.ts, но проблема сохраняется 

import { NgModule, NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA,Component,  Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@NgModule({

  schemas: [ NO_ERRORS_SCHEMA]

})

@Component({
  selector: 'app-video-page',
  templateUrl: './video-page.component.html',
  styleUrls: ['./video-page.component.css']
})
export class VideoPageComponent implements OnInit {

  constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document) {

  }

  ngOnInit() {

  }

}

Пожалуйста, помогите мне

1 Ответ

0 голосов
/ 12 марта 2019

Ошибка в том, что вы пытаетесь использовать тег с именем «smartVideo», angular ожидает, что у вас есть компонент с именем smartVideo, но он не может его найти и выдает ошибку.

В компоненте, который вы определили, должна быть аннотация @NgModule, в свойствах добавьте schemas: [NO_ERRORS_SCHEMA], и это должно решить ее. (вторая строка в сообщении об ошибке)

...