vaadin - 在 Vaadin 14 应用程序中嵌入 video-js

Question

我正在尝试将 video-js 嵌入到我的 Vaadin 14 应用程序中。目前我只想让它工作，所以我正在对所有参数进行硬编码。我正在尝试将来自 video-js 的元素包装在 PolymerElement 中。我已经在几个地方导入了 video-js 模块，但我无法让它工作。相同的 html 代码在纯 html 文件中可以正常工作。组件出现并设置了“海报”，但视频未加载且控件未显示。

这是我的 PolymerElement...

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import videojs from 'video.js/dist/video.js';

class MyVideoJS extends PolymerElement {
  static get template() {
    return html
     <script src="video.js/dist/video.js"></script>
     <video
         id="my-video"
         class="video-js"
         controls
         fluid
         preload="auto"
         poster="https://www.epica.nl/1020_epi_omega_meta-2.jpg"
         data-setup='{"liveui": true }'
         autoplay="true"
       >

          <source src="https://dygu17rhyc0j1.cloudfront.net/out/v1/96e683c9e6b44a03835c3ea47635a4a7/index.m3u8?start=2021-11-08T16:22:00-00:00" type="application/x-mpegURL" />
          <p class="vjs-no-js">
           To view this video please enable JavaScript, and consider upgrading to a
           web browser that
           <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
         </p>
       </video>
    ;
  }
  handleClick() {
        console.log('Button was clicked.');
        window.alert('Hello');
        var player = videojs('my-video');
  }
}
window.customElements.define('my-video-js', MyVideoJS);

这是我的 Vaadin 组件..

@Tag("my-video-js")
@NpmPackage(value = "video.js", version = "^7.8.2")
@JsModule("video.js/dist/video.js")
@CssImport("video.js/dist/video-js.css")

@JsModule("./my-video-js/my-video-js.js")
public class MyVideoJS extends Component {

    public MyVideoJS() {  }

    public void click() {
        getElement().callJsFunction("handleClick");
    }
}

我这样做对吗？

谢谢，

斯图尔特。

标签： vaadinvaadin-flowvaadin14