createVideo

API for the createVideo function

createVideo is a Solid sort of hook, which will be used to interact with the MediaKit API.

Usage

Basic

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

const { Video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({
  source: string, // URL of the video
  type: string, // MIME type of the video
  onFailed?: (
  video: HTMLVideoElement,
  retry: () => Promise<void>,
  canBeUnmuted: boolean
  ) => void | Promise<void>
})

IE

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

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) {
      console.log('called onFailed within createVideo')
      video.muted = true
      await retry()
    },
  })

Actual

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',
  })

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

Returns

• canBeUnmuted - A signal that will check if the user interacts or has interacted with the page, if he did, you can start playing audio files.
• isVideoLoading - A signal that will check if the video is loading or not.
• play - A function that can be used to start playing the video.
• pause - A function that can be used to pause the video.
• paused - A Signal that will return if the video is paused or not.

Video

Solid component that will render the video.

<Video autoplay muted={canBeUnmuted() ? false : true} />

The Video fn also takes in an onFailed option, this can be used to override the onFailed option passed to createVideo.

<Video
  autoplay
  muted={canBeUnmuted() ? false : true}
  onFailed={(video, retry, canBeUnmuted) => {
    console.log('called onFailed within Video')
    video.muted = canBeUnmuted ? false : true
    retry()
  }}
/>

Properties

• source - The URL of the video.
• type - The MIME type of the video.

onFailed

A function that will be called if the video fails to load, it will receive the video element, a retry function and a boolean that will tell if the video can be unmuted or not.

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

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, canBeUnmuted) {
      console.log('called onFailed within createVideo')
      video.muted = canBeUnmuted ? false : true
      await retry()
    },
  })