Flutter Web & Player.js: How to control an iframe containing a video?

Question

I am trying to programmatically stop and play a video stream from bunny.net in an iframe placed in a stateful widget.

According to Bunny.net: The Bunny.net Stream Player offers methods through its embeddable iframe player, enabling external programmatic interaction with the playback session. The embeddable iframe player employs the player.js JavaScript library.

Steps to implement this are mentioned here. Also, I studied the Player.js documentation.

---

I wrote this code which displays the video along with its GUI controls:

 @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',
            ),
    );
  }

Using the above two guidelines of how to control video playback from Bunny.net using Player.js, I tried stopping the video like this:

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

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

Nothing happens, and no errors occur.

I tried adding this to the index.html file, but still nothing happened.

<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>

Any ideas on how to correctly solve this problem?

Answer 1

not sure how to solve the issue itself, but please pay attention that you are using player.js library but referring to playerjs.com documentation. These are two different projects.

Cheers!