¿Cómo reproducir video en react.js usando etiqueta de video html?

Solución:

Esto puede deberse a varios factores, a saber, la configuración de su servidor.

Suponiendo que su servidor sea capaz de servir archivos mp4 correctamente y se esté ejecutando desde el my-app directorio, entonces debería poder resolver el problema agregando un / al comienzo de tu src atributo:

<source src="https://foroayuda.es/Videos/video1.mp4" type="video/mp4"/>

Si ha creado su proyecto a través de create-react-app, entonces querrás crear un Videos carpeta debajo de la public y coloque su archivo de video allí, ya que aquí es donde se sirven los activos públicos de forma predeterminada.

Entonces, coloque su archivo de video en my-app/public/Videos/video1.mp4. Luego, borre la memoria caché de su navegador y reconstruya y vuelva a cargar su aplicación.

También me encontré con estos mismos problemas hace unos días, pero descubrí la forma original de resolver este problema con el estilo nativo de React.JS.

para su escenario, digamos que desea importar video localmente en su archivo de proyecto en la aplicación de reacción, en lugar de usar la sintaxis HTML nativa para, por ejemplo:

<video width="750" height="500" controls >
      <source src="https://foroayuda.es/./Videos/video1.mp4" type="video/mp4"/>
</video>

que para mí no funcionó para mí en mi caso para mi proyecto. Así que modifiqué ligeramente el código de la siguiente manera y funcionó a la perfección.

Debe importar el video como cierta entidad en reaccionar al igual que cómo importar cualquier otro paquete / módulo npm

por ejemplo, en su caso, debe hacer estos pequeños cambios:

import React, { Component } from 'react'
import video from './Videos.video1.mp4'

class App extends Component {
  render() {
    return (
      <div className="App">
      <p>hello</p>
      <video width="750" height="500" controls >
      <source src={video} type="video/mp4"/>
     </video>
      </div>
    );
  }   
}

o

import React, { Component } from 'react'
import video from './Videos.video1.mp4'

class App extends Component {
  render() {
    return (
      <div className="App">
      <p>hello</p>
      <video src={video} width="750" height="500" controls>
     </video>
      </div>
    );
  }   
}

esto también funcionará bien sin usar <source> etiqueta

Te perdiste una barra inclinada hacia adelante /. Debería ser <source src="https://foroayuda.es/Videos/video1.mp4" type="video/mp4"/>

---

---

Utiliza Nuestro Buscador