Feature Request: Allow access to the native html5 <video/> tag

[harshmandan]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player
mux-video

Description

I'm using the mux-video for drm playback. The app is written in svelte and svelte has very nice inbuilt two way bindings for video/audio elements. Since, mux-video also creates a video element inside the mux-vudei tag:

Is there any way to create the video element and manually pass it to the "media" slot? Maybe, something like this:

<script lang="ts">
let $muted = writable(false);
let currentTime: number

function muteUnmute() {
  $muted = !$muted;
}
</script>

<mux-video playback-id={playbackId}>
  <video on:click={muteUnmute} bind:this={myVideoEl} bind:currentTime bind:muted={$muted}>
</mux-video>

Expected Behavior

I'd love for this to be an option!

[luwes]

with mux-video this is indeed possible already!
mux-player doesn't support this yet but I'll bring this up to the team.

[harshmandan]

Hey @luwes, I tried doing it with mux-video but could not get it to work.

<mux-video playback-id="..." playback-token="..." drm-token="...">
  <video slot="media"/>
</mux-video>

How do I get the src from mux-video & pass it to video because it does not happen automatically?

[harshmandan]

Ok I tried it again, I think it is working fine. Here's the repl:
https://svelte.dev/playground/73e72a2541f5434689e9ac817d833e95?version=5.28.2

Let me know if this is not the way to do it, since I could not find it in the docs!

[luwes]

This is the way yes! Indeed we should add it to the docs, it's not covered yet.