Flutter Web & Player.js：如何控制包含视频的 iframe？

Question

我正在尝试

programmatically stop and play

来自

bunny.net

的视频流放置在有状态小部件中的 iframe 中。

根据Bunny.net： Bunny.net Stream Player 通过其嵌入式 iframe 播放器提供方法，从而实现与播放会话的外部编程交互。

The embeddable iframe player

采用 player.js JavaScript 库。

此处提到了实现此操作的步骤。另外，我研究了 Player.js 文档。

我编写了这段代码，用于显示视频及其 GUI 控件：

---

 @override
  void initState() {
    _url = "https://iframe.mediadelivery.net/embed/2196455";
    _iframeElement = IFrameElement()
      ..src = _url
      ..id = 'iframe0'
      ..allowFullscreen = true;
      
    ui.platformViewRegistry.registerViewFactory(
        'iframeElement', (int viewId) => _iframeElement);

    super.initState();
  }

 @override
  Widget build(BuildContext context) {
    return Container(
            child: HtmlElementView(
              viewType: 'iframeElement',
            ),
    );
  }

---

使用上面关于如何使用 Player.js 控制 Bunny.net 视频播放的两个指南，我尝试像这样停止视频：

 IFrameElement iframe = querySelector('#iframe0') as IFrameElement;
 iframe.contentWindow!.postMessage({"api": "stop"}, "*");

 IFrameElement iframe2 =
   document.getElementById("iframe0")! as IFrameElement;
 iframe2.contentWindow!.postMessage({"api": "stop"}, "*");

什么也没有发生，也没有发生错误。

我尝试将其添加到index.html文件中，但仍然没有发生。

<script type="text/javascript"
            src="//assets.mediadelivery.net/playerjs/player-0.1.0.min.js"></script>

<script>
    const player=new playerjs.Player(document.getElementById("iframe0"));
    player.on('stop', () => {
    log("stop");
    });
</script>

关于如何正确解决这个问题有什么想法吗？

Answer 1

playerjs.com

文档。这是两个不同的项目。 干杯！