svelte-audio-video

Provides <Audio /> and <Video /> components that automatically attach and detach a track, if provided. This is particularly useful for video conferencing applications, but can also be used for plain video or audio applications.

yarn add svelte-audio-video

Example Usage (video conferencing)

<script>
  import { Audio, Video } from 'svelte-audio-video'

  const track = {
    attach: (element, _track) => {
      // when fired, do whatever is needed to attach the track
      // Note: `this` refers to the `track` object
    },

    detach: (element, _track) => {
      // when fired, do whatever is needed to detach the track
      // Note: `this` refers to the `track` object
    },
  }
</script>

<!-- 
  `svelte-audio-video` guarantees that regardless of the order in which the element is
  mounted or the track exists (i.e. is non-null), the passed-in track will be
  "attached" to the underlying `<video>` HTML element.
  -->
<Video {track} />

Example Usage (streaming video)

<script>
  import { Audio, Video } from 'svelte-audio-video'
</script>

<Video controls={true}>
  <source
    src="https://ia800208.us.archive.org/4/items/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
    type="video/mp4" />
</Video>