es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Incapacidad para reproducir enlaces de video en React.

16 Jun, 2023 Programación

Estoy tratando de reproducir enlaces de video en React, por el momento solo funciona el reproductor de YouTube. ¿Cómo puedo agregar wistia, vimeo y loom? He intentado usar el reproductor de VLC pero arroja un error relacionado con las dependencias.

import ReactPlayer from "react-player";

{
  this.state.element.element === "Video" && (
    <div className="justify-content-center">
      <div className="p-3">
        <input
          id="video"
          type="text"
          className="form-control"
          placeholder="Introduce la URL del sitio web"
          defaultValue={this.props.element.url}
          onBlur={this.updateElement.bind(this)}
          onChange={this.editElementProp.bind(this, "url", "value")}
        />
      </div>
      <div className={`p-3 ${styles.iframeHeading}`}>
        <ReactPlayer
          className="w-100 h-100"
          allowfullscreen
          url={this.props.element.url}
          height="200"
          width="300"
          title="Contenido cargado desde el sitio web"
        />
      </div>
    </div>
  );
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para añadir soporte a videos de Wistia, Vimeo, y Loom en tu aplicación de React, puedes utilizar las siguientes librerías:

    1. Wistia: Puedes utilizar la librería react-wistia (https://github.com/guillaumervls/react-wistia) para insertar videos de Wistia en tu aplicación. Después de instalar la librería, puedes utilizar el componente Wistia para reproducir el video.

    2. Vimeo: Puedes utilizar la librería vimeo-player (https://github.com/vimeo/player.js) para reproducir videos de Vimeo. Después de instalar la librería, puedes utilizar la clase Player para reproducir el video.

    3. Loom: Puedes utilizar la librería react-player (https://github.com/CookPete/react-player) para reproducir videos de Loom. Después de instalar la librería, puedes establecer la propiedad url a la URL del video de Loom y el reproductor detectará automáticamente el tipo de reproductor y reproducirá el video.

    Aquí tienes un ejemplo de cómo modificar tu código para soportar videos de Wistia, Vimeo, y Loom utilizando las librerías anteriormente mencionadas:

    import ReactPlayer from "react-player";
import Wistia from "react-wistia";
import Player from "@vimeo/player";

{
  this.state.element.element === "Video" && (
    <div classname="justify-content-center">
      <div classname="p-3">
        <input id="video" type="text" classname="form-control" placeholder="Introduce la URL del sitio web" defaultvalue="{this.props.element.url}" onblur="{this.updateElement.bind(this)}" onchange="{this.editElementProp.bind(this," "url",="" "value")}="">
      </div>
      <div classname="{`p-3" ${styles.iframeheading}`}="">
        {this.props.element.url.includes("wistia.com") && (
          <wistia hashedid="{this.getWistiaId()}"></wistia>
        )}
        {this.props.element.url.includes("vimeo.com") && (
          <div ref="{(ref)" ==""> {
              this.vimeoPlayer = ref;
            }}
          />
        )}
        {this.props.element.url.includes("loom.com") && (
          <reactplayer classname="w-100 h-100" allowfullscreen="" url="{this.props.element.url}" height="200" width="300" title="Contenido cargado desde el sitio web"></reactplayer>
        )}
      </div>
    </div>
  );
}

getWistiaId() {
    // Extrae el ID del video de Wistia de la URL
    const match = this.props.element.url.match(/wistia.com\/(medias|embed)\/(.*)/);
    if (match) {
        return match[2];
    }
    return '';
}

componentDidMount() {
  if (this.props.element.url.includes("vimeo.com")) {
    // Crea la instancia del reproductor de Vimeo
    this.player = new Player(this.vimeoPlayer, {
      id: this.getVimeoIdFromUrl(this.props.element.url),
    });
  }
}

getVimeoIdFromUrl(url) {
    // Extrae el ID del video de Vimeo de la URL
    const match = url.match(/vimeo.com\/(.*)/);
    if (match) {
        return match[1];
    }
    return '';
}

    Nota que necesitas actualizar las funciones getWistiaId y getVimeoIdFromUrl para extraer correctamente los IDs de los videos. Además, asegúrate de instalar las librerías necesarias utilizando npm o yarn.

Comments are closed.