yt_webview|

Reproductor de videos de Youtube creado para React Native Expo. Carga el video que quieras ingresando su id de manera fácil y sencilla.

Instalación

Shell	Command
sh	npm i yt_webview

Ejemplo

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { useState } from 'react'
 
import YT_WebView from 'yt_webview';

export default function App() {
    const [data, setData] = useState({
        idVideo: "LDb6yMEKmRY",
        height: 350,
        width: 'screen'
    })

    return (
        <View style={styles.container}>
            <YT_WebView
                data={data}
            />
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Prop data

La propiedad de datos es un objeto que puede estar en un useState. Este objeto debe tener las siguientes propiedades.

Nombre	Valor
idVideo	String
height	Number, String
width	Number, String
showControls	Boolean

Definición

Nombre	definición
idVideo	Dato de video de YouTube que identifica el video que cargará el reproductor.
height	Alto del vídeo
width	Ancho del vídeo. De forma predeterminada, el ancho del vídeo se establece en screen.
showControls	Mostrar o no la barra de control del reproductor.

Eventos

Eventos	definición
unstarted	Se ejecuta cuando el vídeo no se ha iniciado.
playing	Se ejecuta cuando el vídeo esta en reproducción.
pause	Se ejecuta cuando el vídeo esta en pausa
buffering	Se ejecuta cuando el vídeo esta almacenando en búfer
ended	Se ejecuta cuando el vídeo ha finalizado

Ejemplo

const unstarted = () => {
    alert('unstarted')
}
const playing = () => {
    alert('playing')
}
const ended = () => {
    alert('ended')
}

return (
    <View style={styles.container}>
        <YT_WebView 
            data={data}
            unstarted={unstarted}
            playing={playing}
            ended={ended}
        />
        <StatusBar style="auto" />
    </View>
);

Si desea ver pantalla completa, configure el alto con el valor 'screen' que equivale a fullscreen. Para rotar la pantalla puede usar Expo ScreenOrientation para rotar la pantalla. ScreenOrientation.

Si desea algún otro cambio o modificación, contáctame [e-mail]