VideoPlayer

Video.js-powered player with automatic format handling. Includes custom play/pause overlay and imperative controls via ref (for advanced scenarios like synchronized playback). Video.js handles codec support, adaptive streaming, and disposal lifecycle automatically.

Anchor to propsProps

Anchor to src src string required: The video source URL
Anchor to autoplay autoplay boolean: Whether the video should autoplay
Anchor to format format string: The format/MIME type of the video (default: 'video/mp4')
Anchor to height height number: Video height in pixels
Anchor to loop loop boolean: Whether the video should loop
Anchor to muted muted boolean: Whether the video should be muted
Anchor to onEnded onEnded () => void: Callback when video ends
Anchor to onPause onPause () => void: Callback when video is paused
Anchor to onPlay onPlay () => void: Callback when video starts playing
Anchor to onReady onReady () => void: Callback when video player is ready
Anchor to playButtonComponent playButtonComponent React.ReactNode: Custom play button component
Anchor to poster poster string: URL for the poster image shown before playback
Anchor to preload preload 'none' | 'metadata' | 'auto': Preload behavior: 'none', 'metadata', or 'auto'
Anchor to width width number: Video width in pixels

Examples

tsx

import React from 'react'

import {VideoPlayer} from '@shopify/shop-minis-react'

export default function MyComponent() {

return (

<VideoPlayer

src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"

poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"

width={320}

muted

)

}

Preview

Examples

tsx

import React from 'react'

import {VideoPlayer} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <VideoPlayer
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
      width={320}
      muted
    />
  )
}

Description

A basic video player with a fixed height and poster image

tsx

import React from 'react'

import {VideoPlayer} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <VideoPlayer
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
      width={320}
      muted
    />
  )
}

Description

Video player with imperative controls

tsx

import {useRef} from 'react'
import {VideoPlayer, Button, VideoPlayerRef} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const handlePlay = () => {
    ref.current?.play()
  }

  const handlePause = () => {
    ref.current?.pause()
  }

  const ref = useRef<VideoPlayerRef>(null)

  return (
    <div>
      <VideoPlayer
        ref={ref}
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        width={400}
        height={225}
      />
      <div style={{marginTop: '10px', display: 'flex', gap: '10px'}}>
        <Button onClick={handlePlay}>Play</Button>
        <Button onClick={handlePause} variant="secondary">
          Pause
        </Button>
      </div>
    </div>
  )
}

Was this page helpful?