Как пилотировать стороннюю библиотеку javascript, работающую на пользовательском элементе HTML из компонента Angular 6?
Моя цель - инкапсулировать существующий видеопроигрыватель javascript как отдельный модуль Angular 6.
Плеер встраивается в веб-страницу с помощью настраиваемого HTML-элемента (известного в дальнейшем как <media-player>), который принимает некоторые атрибуты параметров. Его логика находится в одном проприетарном (минифицированном) файле Javascript, который предоставляет методы (воспроизведение / остановка и т. д.), Которые могут быть применены к ссылке на DOM этого HTML-элемента. Пример :
HTML
<html>
<head>
<script type = "text/javascript" src = "./lib/media-player.js"></script>
</head>
<body>
<media-player id = "my_player" media='{"url":"http://example.com"}' />
</body>
</html>
Javascript
var player = document.getElementById('my_player');
player.play();
player.stop();
Я предполагаю, что библиотека работает, ища этот конкретный элемент в DOM после загрузки страницы и визуализируя на его месте кучу материалов для воспроизведения видео, при этом JS API реализуется как набор методов расширения на этом элемент.
Моя проблема связана с отсутствием описания какого-либо прямого метода или переменной.
Большинство онлайн-решений относятся к раскрытию некоторых известных методов или переменных базовой библиотеки с помощью оператора declare var MyLibrary: any;.
Поправьте меня, если я ошибаюсь, но в данном случае это невозможно, потому что такого объекта, доступного для объявления, нет, а библиотека, с моей точки зрения, в значительной степени является черным ящиком. Обратный инжиниринг библиотеки на данном этапе невозможен.
К сожалению, он не является открытым / общедоступным. Его производит местная компания, специализирующаяся на решениях для воспроизведения видео. Я начну изучать упомянутые вами ключевые слова, так как в настоящее время я плохо понимаю, что они представляют. Спасибо.
Обычно в этой библиотеке есть какой-то init или что-то еще. Самый умный подход, которому вы, вероятно, можете следовать: 1) Создайте компонент. 2) Создайте соответствующий HTML. 3) Создайте экземпляр настраиваемой библиотеки в NgOnInit. 4) Выставить нативный элемент через # и @ViewChild. 5) Получите доступ к собственному элементу. 6) Прибыль.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Есть ли шанс, что вы можете назвать библиотеку? Это не должно быть слишком сложно, нужно просто правильно обернуть вещи и грамотно использовать
@ViewChildиnativeElement.