jwplayer 在 Angular 元素中表现不佳

jwplayer doesn't play well in Angular Elements

我的这个 Angular 组件带有嵌入式 jwplayer，运行良好。当我尝试使用 Angular 元素从中创建自定义元素或尝试使用 "encapsulation: ViewEncapsulation.Native" 时，jwplayer 将无法初始化。 jwplayer 已加载，我可以在 window 对象中看到它。

core.js:1604 ERROR TypeError: jwplayer(id).setup is not a function
    at t.setupPlayer (jw-player.js.pre-build-optimizer.js:70)
    at HTMLScriptElement.S (zone.js:1188)
    at t.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4034)
    at t.invokeTask (zone.js:420)
    at e.runTask (zone.js:188)
    at e.invokeTask [as invoke] (zone.js:496)
    at k (zone.js:1540)
    at HTMLScriptElement._ (zone.js:1566)

原因是加载的库 (https://content.jwplatform.com/libraries/6gLLM4B1.js)。它使用 document.getElementById(...) 查找视频元素，有时也使用 document.body。但是，视频元素是 JwPlayerComponent，如果您在根组件上激活 Shadow DOM，该元素将隐藏在 Shadow DOM 中。

另一方面，您可以使用 ViewEncapsulation.Native 作为 Angular 元素/自定义元素提供它。为了完成这项工作，我不得不对项目进行一些修改：

删除选择器b/c它与自定义元素的名称冲突(// selector: 'wu-player-element')
同时删除模块的 bootstrap 部分 (//bootstrap: [AppComponent])
修改你的 tsconfig.app.json：添加 "target": "es2015", b/c 自定义元素不工作，TypeScript 降级类到 ES5

如果你仍然需要 ES5，你可以使用 polyfill (native-shim.js)，参见：https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx

jwplayer 在 Angular 元素中表现不佳

jwplayer doesn't play well in Angular Elements

jwplayer

shadow-dom

custom-element