4

No se por qué no me aperece ningun video al poner este código:

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import './Carousel.css'

export default function Carousel() {
    return (
        <React.Fragment>
            <CssBaseline />
            <div class='vidContain'>
                <div class='vid'>
                    <video loop autoPlay>
                        <source src="videocarousel.mp4" type="video/mp4" ></source>
                    </video>
                </div>
                <div class='content'>Team Manager es juego en equipo</div>
            </div>
        </React.Fragment>
    );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

.vidContain {
    height: 600px;
    position:relative;
    display:inline-block;
    margin:10px;
}
.vid {
    position: absolute; 
    top: 0; left:0;
    height: 90vh;
    z-index: -1;
}    
.content {
    position:absolute;
    top:0; left:0;
    background: black;
    color:white;
}

El caso es que si sustituyo la etiqueta <video> por el paquete React Player:

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />

sí funciona. Por lo que me lleva a pensar que el bug está en la etiqueta <video>

El problema es que ReactPlayer no me sirve porque me aparecen los controles de Youtube, aparte de otras desventajas. Me gustaría hacerlo con la etiqueta video.

1 respuesta 1

3

Si tienes todo bien implementado, el vídeo te debe funcionar de la misma forma que funciona sin hacer uso de React. Si no te funciona, el problema debe estar en otro lado. Aquí te dejo un snippet funcional con un vídeo público para que veas que funciona. Algunas cosas que debes tener en cuenta:

  • En JavaScript (y por lo tanto en JSX), no uses class, esta es una palabra reservada, así que en su lugar en React es necesario usar className

  • No me queda claro por tu código, por qué estás aplicando z-index con valor -1 al contenedor del vídeo. Dependiendo de tu layout o los elementos que tengas posicionados, puedes estar ocultándolo.

  • Estás intentando reproducir el vídeo automáticamente con autoPlay, aunque esto no es recomendado, si no quieres que navegadores como Chrome bloqueen la reproducción, añade la propiedad muted al vídeo.

function Carousel() {
  return (
    <React.Fragment>      
      <div className='vid'>
        <video loop autoPlay muted>
          <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4" />
          </video>
        </div>
    </React.Fragment>
  );
}

ReactDOM.render(<Carousel/>, document.getElementById('videoApp'));
.vid {
    height: 90vh;
}  
.vid video {
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="videoApp"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.