Player not working on web platform (embedded and fullscreen)

[choozn]

The player is not initialized despite returning a success object and preloading the content. I've tried the library in both svelte and astro. Same behavior for both.

Expected Behavior

The player should be initialized as specified in the docs.

Current Behavior

A success object is returned, but the player is not initialized. Using the fullscreen mode, the sound of the video is played but no player is visible. A fullscreen request is denied. Using the embedded mode, nothing happens besides preloading the content and returning the success object.

{
  "method": "initPlayer",
  "result": true,
  "value": true
}

Steps to Reproduce

<script>
import { CapacitorVideoPlayer, type capVideoPlayerOptions } from "capacitor-video-player";

document.getElementById("play")?.addEventListener("click", async () => {
  const playerOptions: capVideoPlayerOptions = {
    url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
    mode: "embedded",
    playerId: "player",
    componentTag: "div",
  };

  const player = await CapacitorVideoPlayer.initPlayer(playerOptions);
  console.log(player);
})
</script>

<div id="player"></div>
<button id="play">Test</button>

Context (Environment)

• AstroJS / Svelte

[jepiqueau]

@choozn can you share your complète code on github

[choozn]

I've published a project on github to reproduce the bug: https://github.com/choozn/bug-showcase-capacitor-video-player

[jepiqueau]

@choozn the componentTag must be the tag including <div id="player"></div> in your example it must be componentTag: "body" and this will work the best way would be to include the <div id="player"></div> inside a <div>...</div> and it will work. In your case do not forget to change in thecapacitor.config.tsfile the webDir: 'public' and it will work. Thank for using the plugin `