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 [email protected]