Initialization Configuration

During initialization, parameters such as autoplay, muted, volume, and loop attributes can be configured. However, it is also possible to modify the volume and muted attributes at a later time, as per requirements.

Media Initialization Configuration

The initialization configuration can set preferred video, caption, and audio behavior when playback starts. These preferences are applied on supported platforms.

Attribute	Type	Description
video	object	Initial ABR, bitrate, and latency settings.
caption	object	Initial caption display, language, and source settings.
audio	object	Initial audio language settings.

Media Initialization Example

const config: Configuration = {
    ...
    initialization: {
        video: {
            abrEnabled: true,
            preferredBitrate: 1000000,
            latencyMode: "def",
        },
        caption: {
            enabled: true,
            preferredLanguage: "en",
            source: ["manifest", "embedded"],
        },
        audio: {
            preferredLanguage: "en",
        },
    },
    ...
};

Attribute	Type	Description
initialization.video.abrEnabled	boolean	Enables or disables ABR on supported platforms.
initialization.video.preferredBitrate	number	Preferred starting bitrate on supported platforms.
initialization.video.latencyMode	LatencyMode	Preferred latency mode on initialization. Supported values are def and low.
initialization.caption.enabled	boolean	Shows or hides captions on initialization.
initialization.caption.preferredLanguage	string	Preferred caption language on supported platforms.
initialization.caption.source	("manifest" \| "sidecar" \| "embedded")[]	Caption sources to use. Defaults to ["manifest", "embedded"].
initialization.audio.preferredLanguage	string	Preferred audio language on supported platforms.

Autoplay Configuration

The implementation of autoplay attribute can be done in Lura Player using the following configuration.

Attribute	Type	Description
autoplay	boolean	Autoplay attribute of the player. Defaults to false

Autoplay Example

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlaylist, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
        ...
        controls: {
          autoplay: true,
        },
        ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player} Controls={LuraPlayerControls} />
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

Mute Configuration

The implementation of initially muted attribute can be done in Lura Player using the following configuration.

Attribute	Type	Description
muted	boolean	Whether to start muted when the player autoplays. Defaults to false.

info

Some platforms doesn't support unmuted autoplay. So if autoplay attribute is set to true, muted attribute will be overwritten to true in platforms that doesn't support unmuted autoplay.

Mute Example

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlaylist, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
        ...
        controls: {
            muted: true,
        },
        ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player} Controls={LuraPlayerControls} />
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

Volume Configuration

The implementation of initial volume attribute can be done in Lura Player using the following configuration.

Attribute	Type	Description
volume	number	Initial volume of the player between 0.0 and 1.0. Defaults to 1.0

Volume Example

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlaylist, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
        ...
        controls: {
            volume: 1.0,
        },
        ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player} Controls={LuraPlayerControls} />
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

Loop Configuration

The implementation of loop attribute can be done in Lura Player using the following configuration.

Attribute	Type	Description
loop	boolean	Loop the video when it ends. Defaults to false.

Loop Example

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlaylist, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
        ...
        controls: {
            loop: true,
        },
        ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player} Controls={LuraPlayerControls} />
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

Combined Example

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlaylist, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
        ...
        controls: {
          autoplay: true,
          muted: true,
          volume: 1.0,
          loop: true
        },
        ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player} Controls={LuraPlayerControls} />
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});