Multiple player on one page

[Martin Schwenzer]

Would be great the have some examples of how to integrate multiple players in one page.
Especially a solution that makes all player pause, if one of them stats playing.

I did not manage to implement this in SvelteKit .

[Rahim Alwer]

There's nothing special to add multiple players instances, setup your player in something like Player.svelte and re-use the component.

You can manage multiple instances at the module level like so:

<script lang="ts" context="module">
  import type { MediaPlayerElement } from 'vidstack/elements';

  let activePlayer: MediaPlayerElement | null = null;
</script>

<script lang="ts">
  import 'vidstack/bundle';
  
  let player: MediaPlayerElement;
  
  function onPlay() {
    if (activePlayer !== player) activePlayer?.pause();
    activePlayer = player;
  }
  
  function onPause() {
    activePlayer = null;
  }
</script>

<media-player on:play={onPlay} on:pause={onPause)>
  <!-- ... -->
</media-player>

[Rahim Alwer]

If you were facing any problems across multiple player instances then that would require a more detailed issue report. You can open a new issue if that's the case :)

[Martin Schwenzer]

Thanks that showed me the right way.
Attached my simple solution for SvelteKit:

<script context="module">
  let activePlayer = null;
</script>
<script>
  import "vidstack/bundle";

  export let src_hls;

  let player;

  function onPlay() {
    // console.log("onPlay");
    if (activePlayer !== player) {
      try {
        activePlayer?.pause();
      } catch (error) {}
    }
    activePlayer = player;
  }

  function onPause() {
    // console.log("onPause");
  }
</script>

<media-player on:play={onPlay} on:pause={onPause} src={src_hls} bind:this={player}>
  <media-provider>
    <media-poster class="vds-poster" src={src_poster} alt="" />
  </media-provider>
  <media-video-layout></media-video-layout>
</media-player>

Not perfect but works.
I still have to figure out, how to:

• find a solution for respecting Picture in Picture, while starting another video
• find a solution that lives across routing / onDestroy.

Guess this or an better version of my solution would help in the examples.