Granite

English

한국어

English

한국어

Appearance

Video ​

The Video component implements audio focus control logic to prevent the app from stopping music playing in other apps. It automatically plays or pauses based on the app's state. For example, when the app transitions to the background, the video automatically pauses.

WARNING

The Video component uses react-native-video version (6.0.0-alpha.6). Therefore, some types or features may not be compatible with the latest version.

Signature ​

typescript
Video: import('react').ForwardRefExoticComponent<
  Omit<import('react-native-video').VideoProperties, 'onAudioFocusChanged'> & {
    onAudioFocusChanged?: (event: { hasAudioFocus: boolean }) => void;
  } & import('react').RefAttributes<VideoRef>
>;

Parameter ​

  • propsVideoProperties

    Properties provided by `react-native-video`.

    • props.mutedboolean · false

      Controls the mute state of the video. If true, the video's audio is muted; if false, the audio plays. Default is false.

    • props.pausedboolean · false

      Property to control video playback. If true, the video is paused; if false, the video plays. Default is false, and it autoplays.

    • props.onAudioFocusChangedOnAudioFocusChanged

      Callback function called when audio focus changes. Must be implemented when muted is false. For more details, see OnAudioFocusChanged.

  • props.source.uristring

    Source of the video to play. Can be set to a file path or URL.

  • ref필수 · Ref<VideoRef>

    Reference object to access the video instance. Through this ref, you can access various methods of the video instance.

Property ​

  • isAvailableboolean

    Value to check if the Video component can be used. You can check this value to determine if the user can render the video or if video functionality is unavailable due to environmental constraints (e.g., network connection issues, unsupported devices). If this value is false, you should handle it by not rendering the video or providing alternative content.

Return Value ​

  • JSX.Element

    Returns a JSX element that renders the video. Uses Animated to provide smooth animation effects during video playback.

Example ​

Video Autoplay Example ​

tsx
import { useRef } from 'react';
import { View } from 'react-native';
import { Video } from '@granite-js/react-native';

export function VideoExample() {
  const videoRef = useRef(null);

  return (
    <View>
      <Video
        ref={videoRef}
        source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
        muted={true}
        paused={false}
        resizeMode="cover"
        style={{ width: 300, height: 200, borderWidth: 1 }}
      />
    </View>
  );
}

References ​