Question

我试图将BoxCast JS API（http://boxcast.github.io/boxcast_js_docs/examples/）作为第三方库包含到我的Polymer 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>

嵌入Polymer中-不起作用

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元素传递给boxcast-js时我做错了-错误消息也暗示了这一点，但是我不知道该如何解决这个问题。预先感谢您的帮助。

Answer 1

您是否尝试过使用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 ...

http://boxcast.github.io/boxcast_js_docs/changelog/

Answer 2

我不知道Boxcast。

但是，基于第一个代码：

boxcast('#testplayer').loadChannel

然后，您的聚合物尝试中返回的错误看起来像 boxcast 方法需要一个字符串，该字符串允许它找到将作为其基础的元素。

但是，在聚合物版本中：

boxcast(this.$.testplayer)

您使用的不是字符串，而是已经是元素的$ .testplayer。

也许您可以直接在此元素上调用loadChannel

this.$.testplayer.loadChannel (.....

如果失败，您应该在框播文档中查看如何跳过第一步（尝试查找元素）

如果不成功，您可以采用第一个想法（调用boxcast（'＃id'），但该元素应该处于轻度状态而不是阴影状态

为什么会这样？ -消息错误状态

无法在“文档”上执行“ querySelectorAll”

因此，库正在尝试从文档开始查找元素。由于聚合物元素将以阴影形式呈现，因此从文档的根部开始是不可访问的。

使用id testplayer将该元素设置在polymer元素之外，并在该元素内分配一个插槽应使其可从文档访问，但应在该元素内进行渲染。

如何将第三方js库（BoxCast）嵌入到Polymer 3.0中

2 个答案: