Video Block

[jbmoelker]

User story

As an editor,
I want a video block in the CMS that supports uploading my own video,
so that I can add videos to any page without using a 3rd party service like YouTube or Vimeo.

See #32 for 3rd party Video Embed Block.

Checklist

• Supports uploading own video
• Supports being used in both modular content and structured text
• Only autoplays if autoplay and !window.matchMedia('(prefers-reduced-motion: reduce)').matches for a11y

Content model

Video Block

• title: string (single-line), optional
• video: asset, file extension: video, required
• autoplay: boolean
• mute: boolean
• loop: boolean
• tracks?: { kind, label, (.vtt)file } (for a11y. maps to <track>s)

[jbmoelker]

Use official Mux components?

• https://github.com/muxinc/elements/tree/main/packages/mux-video
• https://github.com/muxinc/elements/tree/main/packages/mux-player

Relatively heavy. Lazy load on intent? Use custom Astro directive client:click?

Or create our own custom element, using hls.js, just like the Mux components do?

This is from one of our Vue projects:

<video 
  id="video-player"
  :poster="`${poster}?w=640&auto=format`"
  controls
/>
<script>
  const getHlsPlayer = () => import('hls.js')

  export default {
    mounted() {
      getHlsPlayer().then(({ default: Hls }) => {
        const video = document.getElementById('video-player')

        if (Hls.isSupported()) {
          const hls = new Hls()
          hls.loadSource(this.video.video.streamingUrl)
          hls.attachMedia(video)
          hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play()
          })
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = this.video.video.streamingUrl
          video.addEventListener('loadedmetadata',() => {
            video.play()
          })
        }
      })
    },
  }
</script>