react-native 封裝視頻播放器react-native-video的使用

更新時間：2023年01月31日 15:07:03 作者：在下月亮有何貴干

本文主要介紹了react-native 封裝視頻播放器react-native-video的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

最近工作業(yè)務用到了react-native-video，還需要能夠全屏，全屏需要用到鎖定應用方向（橫屏），需要用到組件react-native-orientation-locker，本文記錄使用方法以及提供一種解決思路。

react-native-orientation-locker

橫豎屏方法

我就只介紹這常用的三個，其他的可以翻看官方文檔

import Orientation from 'react-native-orientation-locker';
Orientation.lockToLandscapeLeft() // 向左方向鎖定橫屏
Orientation.lockToLandscapeRight() // 向右方向鎖定橫屏
Orientation.unlockAllOrientations(); // 解除鎖定
Orientation.lockToPortrait(); // 鎖定豎屏

react-native-video

導入

import Video from 'react-native-video';

函數(shù)部分

? // 設置總時長
? setDuration({ duration }) {
? ? this.setState({ duration });
? }

? // 播放結(jié)束可將暫停變量設置為true
? onEnd() {
? ? this.setState({
? ? ? paused: true,
? ? });
? }

? // 緩沖，loading變量可控制緩沖圈顯示
? onBuffer({ isBuffering }) {
? ? this.setState({ loading: isBuffering });
? }

? // 設置進度條和播放時間的變化，sliderValue用來同步步進器
? setTime({ currentTime }) {
? ? this.setState({
? ? ? sliderValue: currentTime,
? ? });
? }
??
? // 播放暫停
? changePlayed() {
? ? this.setState({ paused: !this.state.paused });
? }

視頻組件

    <View style={styles.Video}>
        {
            loading ? <View style={styles.loading}>
                <ActivityIndicator size='large' color='lightgray' /> // 緩沖圈
            </View> : null
        }
        <Video
            ref={(ref: Video) => {
                this.video = ref; // 視頻Video的ref
            }}
            source={{
                uri: 'http://xxx/xxx.mp4', //播放路徑
            }}
            style={{ width: '100%', height: '100%' }}
            rete={1}
            volume={1}
            paused={paused} // 暫停變量
            onEnd={() => {
                this.onEnd(); // 播放結(jié)束時執(zhí)行
            }}
            onBuffer={data => this.onBuffer(data)} // 緩沖時執(zhí)行,用于顯示緩沖圈
            onProgress={data => this.setTime(data)} // 播放時執(zhí)行函數(shù),用于同步步進器進度
            onLoad={data => this.setDuration(data)} // 播放前得到總時長,用于步進器設置總長
            muted={muted} // 靜音
        />
    </View>

控制臺

    <View style={styles.videoControl}>
        {/* 暫停按鈕 */}
        <TouchableOpacity
            onPress={() => {
                this.changePlayed();
            }}
        >
            <Image style={styles.paused} source={paused ? pausedImg : played} />
        </TouchableOpacity>
        <Slider
            value={sliderValue}
            maximumValue={duration}
            // onValueChange 和 onSlidingComplete 是修改步進器進度時觸發(fā)的函數(shù)
            // 可以在此時同步視頻播放,同步視頻播放的函數(shù)是,video的Ref.seek()
            // 中間需要設置視頻暫停和播放，否則邊拖動邊播放會很奇怪
            onValueChange={(value) => {
                this.video.seek(value);
                this.setState({
                    paused: true,
                });
            }}
            onSlidingComplete={(value) => {
                this.video.seek(value);
                this.setState({
                    paused: false,
                });
            }}
            style={styles.slider}
        />
        {/* 靜音按鈕 */}
        <TouchableOpacity
            onPress={() => {
                this.setState({ muted: !muted });
            }}
        >
            <Image style={{ marginLeft: 10, height: 24, width: 24 }} source={muted ? mute : sound} />
        </TouchableOpacity>
        {/* 全屏按鈕 */}
        <TouchableOpacity
            onPress={() => {
                // 這里涉及到react-native-orientation-locker
                // 可以鎖定應用為橫屏，這里的狀態(tài)設置是我的全屏解決方案
                this.setState({ fullVideoShow: true, sliderValue2: sliderValue }, () => {
                  this.setState({ paused: true });// 需要將原視頻暫停
                });
                Orientation.lockToLandscapeLeft();
            }}
        >
            <Image style={{ marginLeft: 10, height: 20, width: 20 }} source={fullScreen} />
        </TouchableOpacity>
    </View>

全屏實現(xiàn)方案（可參考）

我采用的是彈出層方案，使用Orientation橫屏時，新建一個model層覆蓋全屏，然后新建一個相同的播放組件，記得將原視頻組件暫停。

可以參考的點，以下表示model層上的視頻組件

? // 放大時，總長已經(jīng)不需要再次獲取，我們可以在onLoad2時將sliderValue賦值給video2
? // 達到放大時同步進度的效果
? onLoad2(data) {
? ? this.video2.seek(this.state.sliderValue);
? }
??
? // 設置vedio2的同步步進器2進度時，需要注意，currentTime>0再賦值
? // 否則在視頻加載過程中會出現(xiàn)步進器2跳一下0再恢復的情況
? setTime2({ currentTime }) {
? ? if (currentTime > 0) {
? ? ? this.setState({
? ? ? ? sliderValue2: currentTime,
? ? ? });
? ? }
? }
??
? // 退出全屏
? outFullScreen() {
? ? const { sliderValue2, paused2 } = this.state;
? ? this.setState({ fullVideoShow: false, sliderValue: sliderValue2);
? ? Orientation.lockToPortrait();
? ? // 退出時將原視頻進度同步
? ? this.video.seek(sliderValue2);
? }
??
? // 播放暫停
? changePlayed2() {
? ? this.setState({ paused2: !this.state.paused2 });
? }
??
? // 另外全屏時，要將原視頻paused暫停，可以在全屏按鈕事件那里我有提到。

放大視頻

    <Modal
        visible={fullVideoShow}
        transparent
        animationType='slide'
    >
        <View style={styles.videoModelBack}>
            <View style={styles.videoModel}>
                {
                    loading ? <View style={styles.loading}>
                        <ActivityIndicator size='large' color='lightgray' /> //緩沖圈可復用狀態(tài)
                    </View> : null
                }
                <View style={{ flex: 1 }}>
                    <Video
                        ref={(ref: Video) => {
                            this.video2 = ref;
                        }}
                        source={{
                            uri: 'http://xxx/xxx.mp4',
                        }}
                        style={{ flex: 1 }}
                        rete={1}
                        volume={1}
                        paused={paused2}
                        onEnd={() => {
                            this.onEnd(0);
                        }}
                        onBuffer={data => this.onBuffer(data)}
                        onProgress={data => this.setTime2(data)}
                        onLoad={data => this.onLoad2(data)}
                        muted={muted}
                    />
                </View>
            </View>
            <View style={styles.videoBack}>
                <TouchableOpacity
                    onPress={() => {
                        this.changePlayed2();
                    }}
                >
                    <Image style={[styles.paused]} source={paused2 ? pausedImg : played} />
                </TouchableOpacity>
                <Slider
                    value={sliderValue2}
                    maximumValue={duration}
                    onValueChange={(value) => {
                        this.video2.seek(value);
                        this.setState({
                            paused2: true,
                        });
                    }}
                    onSlidingComplete={(value) => {
                        this.video2.seek(value);
                        this.setState({
                            paused2: false,
                        });
                    }}
                    style={styles.slider}
                />
                <TouchableOpacity
                    onPress={() => {
                        this.setState({ muted: !muted });
                    }}
                >
                    <Image style={styles.img} source={muted ? mute : sound} />
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() => {
                        this.outFullScreen();
                    }}
                >
                    <Image source={outFullScreen} /> // 退出全屏按鈕
                </TouchableOpacity>
            </View>
        </View>
    </Modal>