我正在尝试将BoxCast JS API(http://boxcast.github.io/boxcast_js_docs/examples/)作为第三方库包含在我的聚合物3.0 Web应用程序中。
我设法从上面的链接获得起始脚本/示例作为独立的html / js运行。但是如果我尝试将它嵌入到Polymer Element中,则boxCast播放器会因Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDivElement]' is not a valid selector
错误而失败。
基本html - 成功加载播放器
<div id="testplayer"></div>
<script src="https://js.boxcast.com/v3.min.js"></script>
<script>
boxcast('#testplayer').loadChannel('vgniwkahiegcflco2pq6', {
autoplay: false,
showTitle: true,
showDescription: true
});
</script>
嵌入聚合物 - 不起作用
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import 'https://js.boxcast.com/v3.min.js';
class AruBoxCastPlayer extends PolymerElement {
static get template() {
return html`
<style include="shared-styles">
</style>
<div id="testplayer">
loading boxcast player
</div>
`;
}
static get properties() {
return {
};
}
_loadBroadcast() {
console.log("load broadcast");
console.log('test node binding', this.$.testplayer.textContent);
boxcast(this.$.testplayer).loadChannel('vgniwkahiegcflco2pq6', {
autoplay: false,
showTitle: true,
showDescription: true
});
}
ready() {
super.ready();
this._loadBroadcast();
}
}
window.customElements.define('aru-boxcast-player', AruBoxCastPlayer);
我的假设是我将div
-element传递给boxcast-js时出错了 - 正如错误信息所暗示的那样,但我无法弄清楚如何解决这个问题。在此先感谢您的帮助。
您是否尝试使用es-6导入库的方式...
# First, install the SDK from NPM
npm install boxcast-sdk-js --save
# Then, in your javascript project:
import boxcast from 'boxcast-sdk-js';
我不确定这会有效但像animejs和jquery这样的类似的库正在更新到ES-6并导入类似的
// example
import anime from 'animjs';
import * as $ from 'jquery';
从查看更改日志,他们刚刚将他们的get *方法更新为ES-6 ...
我不知道boxcast。
但是,基于第一个代码:
boxcast('#testplayer').loadChannel
并且在聚合物尝试中返回的错误,看起来像boxcast方法需要一个字符串,允许它找到将作为它的基础的元素。
但是,在聚合物版本中:
boxcast(this.$.testplayer)
您使用的$ .testplayer不是字符串,但已经是一个元素。
也许你可以在这个元素上直接调用loadChannel
this.$.testplayer.loadChannel (.....
如果不这样做,你应该在boxcast docs中看到如何跳过第一步(试图找到元素)
如果做不到这一点,你可以继续第一个想法(调用boxcast('#id'),但元素可能应该在lightdom中,而不是在shadowdom中
为什么会这样? - 消息错误状态
无法在'Document'上执行'querySelectorAll'
所以该库正在尝试从文档开始查找元素。由于聚合物元素将以阴影方式呈现,因此无法从文档的根目录访问它。
在聚合物元素之外设置具有id testplayer的元素,并在元素内部分配一个槽应该使它可以从文档中访问,但是在元素内部呈现。