Skip to main content

Video Controller

Overview​

We've introduced the videoPlayerController property, which expects a callback capable of controlling the main video volume. This addition was necessary for scenarios where we play certain videos in the SDK (such as X media, insights, and promotions), where we aim to mute the video during event translation and resume the volume once the video ends.

type VideoPlayerData = {
  muted: boolean
}
type VideoPlayerController: ({ muted }: VideoPlayerData) => void

How it works​

When we play a video, we call the videoPlayerController callback with the following muted values:

  • true when the SDK video is playing
  • false when the video ends or is paused.
app.jsx
import { StreamLayerProvider } from '@streamlayer/react'
import '@streamlayer/react/style.css'

import { YourApp } from './app'

const toggleVideoVolume = ({ muted }: VideoPlayerData) => {
  const player = document.getElementById('video') as HTMLVideoElement

  if (muted) {
    player.volume = 0
  } else {
    player.volume = 1
  }
}


export const Main = () => {
  return (
    <StreamLayerProvider videoPlayerController={toggleVideoVolume} sdkKey="your-sdk-key" event="your-event-id">
      <YourApp />
    </StreamLayerProvider>
  )
}