Aggiunta di un video in background con React?

Question

Sto cercando di creare una semplice pagina di destinazione che contenga un'immagine di sfondo a schermo intero, che verrà riprodotta non appena il contenuto verrà caricato.

C'è un modo per farlo usando React o CSS all'interno di React?

Ho provato a utilizzare il modulo npm react-drive-in, ma non riesco a capire come caricare i componenti di React sul video. Il video continua a caricarsi sugli altri miei componenti.

Answer 1

penso che qualcosa di simile a questo lavoro:

#background-video{ 
 

 
height: 100%; 
 
width: 100%; 
 
float: left; 
 
top: 0; 
 
padding: none; 
 
position: fixed; // optional depending on what you want 
 

 

 
}

<video id="background-video" loop autoplay> 
 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> 
 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg"> 
 
    Your browser does not support the video tag. 
 
</video>

Si può incorrere in problemi con rapporti a seconda del video che si usa o la dimensione dello schermo clienti.

Quindi potrebbe essere necessario controllare il post this.

Considerare anche la dimensione degli schermi oggi. Che cosa hai intenzione di fare se qualcuno ha un widescreen ridicolmente grande o qualcosa del genere? Il video non sarà in grado di adattarsi allo schermo se non hai video con la stessa risoluzione.

Non sto suggerendo che un video sia una cattiva idea. Voglio semplicemente che tu sia consapevole dei problemi!

Buona fortuna!

Answer 2

In realtà, sono riuscito a far funzionare correttamente il codice di Trevor nel mio progetto. Ho dovuto aggiungere un tag di chiusura all'elemento source, in questo modo.

<video id="background-video" loop autoPlay> 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg" /> 
    Your browser does not support the video tag. 
</video> 

Si noti inoltre che 'autoplay' deve essere modificato in 'autoPlay' o reagire getterà un avvertimento a voi e non auto riprodurre il video. Al di fuori di questi due cambiamenti, copiare e incollare il codice dovrebbe funzionare bene.

ES6/Babel esempio:

'use strict'; 

import React, {Component} from 'react'; 

class Example extends Component { 
    constructor (props) { 
     super(props); 

     this.state = { 
      videoURL: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' 
     } 
    } 

    render() { 
     return (
      <video id="background-video" loop autoPlay> 
       <source src={this.state.videoURL} type="video/mp4" /> 
       <source src={this.state.videoURL} type="video/ogg" /> 
       Your browser does not support the video tag. 
      </video> 
     ) 
    } 
}; 

export default Example; 

Answer 3

import sample from './sample.mp4'; 

<video className='videoTag' autoPlay loop muted> 
    <source src={sample} type='video/mp4' /> 
</video> 

Grazie la nota che 'autoplay' deve essere modificato in 'autoPlay' dal Mr_Antivius. Questo è un modo alternativo per riprodurre il video in React. Per me funziona. Ricorda che il file sample.mp4 si trova nella stessa directory del file JS.