VideoPlayer

component

examples

• Basic video player

  description

  A basic video player with a fixed height and poster image

  import {VideoPlayer} from '@shopify/shop-minis-react'
  
  export default function MyComponent() {
    const handlePlay = () => {
      console.log('Video started playing')
    }
  
    const handlePause = () => {
      console.log('Video paused')
    }
  
    const handleEnded = () => {
      console.log('Video ended')
    }
  
    return (
      <VideoPlayer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="https://picsum.photos/400/225"
        height={225}
        onPlay={handlePlay}
        onPause={handlePause}
        onEnded={handleEnded}
      />
    )
  }
  

• Imperative controls

  description

  Video player with imperative controls

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