Video Controller

Overview

The videoPlayerController property allows you to control the volume of the main video. This feature is essential for muting the video during specific SDK events and resuming the volume afterward.

VideoPlayerData Type

type VideoPlayerData = {  
  muted: boolean  
};

VideoPlayerController Type

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

How It Works

The videoPlayerController callback is triggered with the following parameters:

muted: true when the SDK video is playing.
muted: false when the video ends.

Example Implementation

import { StreamLayerProvider } from '@streamlayer/react';

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

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

const providerProps = {
  sdkKey: 'your-sdk-key',
  videoPlayerController: toggleVideoVolume,
  // Add other provider props as needed
};

export const Main = () => (
  <StreamLayerProvider {...providerProps}>
    {/* Other components */}
  </StreamLayerProvider>
);

Mute StreamLayer Video

You can manage the audio settings for videos using the StreamLayer SDK by utilizing the muted property. By setting this property to true, you can ensure that the video plays without sound.

<StreamLayerSDKAdvertisement muted />
<StreamLayerSDKReact muted />