Install

import { createVideo } from '@solid-mediakit/media'
import { type VoidComponent } from 'solid-js'

const { Video, play, pause, paused, canBeUnmuted, isVideoLoading } =
  createVideo({
    source: 'https://www.w3schools.com/html/mov_bbb.mp4',
    type: 'video/mp4',
    // since we try to autoPlay a video once rendered,
    //  we need to mute it if the user has not interacted with the page
    async onFailed(video, retry, canUnmute) {
      console.log('called onFailed within createVideo')
      video.muted = canUnmute ? false : true
      await retry()
    },
  })

const Home: VoidComponent = () => {
  return (
    <div class='flex flex-col gap-2 items-center justify-center py-12'>
      <h1 class='text-3xl font-bold'>Home</h1>
      <h3 class='text-xl font-bold text-gray-400'>
        Status:
        {isVideoLoading()
          ? 'Loading The Video..'
          : paused()
          ? 'Paused'
          : 'Playing'}
      </h3>
      <Video autoplay muted={canBeUnmuted() ? false : true} />
      <div class='flex gap-2 items-center'>
        <button
          onClick={play}
          class='rounded-lg bg-purple-400 text-white flex items-center justify-center p-3'
        >
          Play
        </button>
        <button
          onClick={pause}
          class='rounded-lg bg-purple-400 text-white flex items-center justify-center p-3'
        >
          Pause
        </button>
      </div>
    </div>
  )
}

export default Home