Я создал проект интерактивного видео с HTML + CSS + JS, работающим с YouTube API.Я хотел бы реализовать его в компоненте Angular, но не смог добиться успеха.
Мой рабочий проект Это дерево проекта:
/Project
|
+-- index.html
|
+-- /css
| |
| +-- customTheme.css
| +-- videojs.markers.min.css
| +-- interaction.css
|
+-- /js
| |
| +-- videojs-markers.min.js
| +-- interaction.js
|
+-- /media
| |
| +-- some medias .png
|
Идея состоит в том, чтобы воссоздать файлы index.html, interactive.css и interactive.js в компоненте Angular и импортировать другие файлы.
Мой угловой компонент Он состоит из 3файлы: component.html, component.css и component.ts.Файл component.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
Я часами пытался воссоздать этот проект.Мне удалось отобразить видео YouTube с API YouTube и отобразить некоторые элементы на экране (чистый CSS).Но мой рабочий проект идет дальше: видео автоматически приостанавливается, и на экране появляется модал, чтобы создать интерактивность с пользователями.У меня много ошибок в консоли с Angular, и я думаю, это потому, что моя реализация проекта на Angular плохая.Итак, основные вопросы : куда и как мне скопировать мой код, чтобы воссоздать мой рабочий проект в угловом компоненте?Как я могу импортировать файлы CSS / JS в угловой компонент, чтобы заставить их работать вместе?Спасибо!