web-dev-qa-db-fra.com

Ajout d'une vidéo de fond avec React?

J'essaie de créer une page d'arrivée simple contenant une image d'arrière-plan en plein écran, qui sera lue dès le chargement du contenu. 

Existe-t-il un moyen de faire cela en utilisant React ou CSS dans React?

J'ai déjà essayé d'utiliser le module react-drive-in de npm, mais je ne peux pas me débrouiller seul pour savoir comment charger mes composants React par-dessus la vidéo. La vidéo continue de se charger sur mes autres composants.

javascriptcssreactjs
8
c0derkr

En fait, le code de Trevor a bien fonctionné dans mon projet. J'ai dû ajouter une balise de fermeture à l'élément source, comme ceci.

<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>

Notez également que «lecture automatique» doit être remplacé par «lecture automatique» ou que React vous envoie un avertissement et non la lecture automatique de la vidéo. En dehors de ces deux modifications, copier et coller le code devrait bien fonctionner.

Exemple ES6/Babel:

'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;
8
Mr_Antivius
import sample from './sample.mp4';

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

Merci de noter que «lecture automatique» devrait être remplacé par «lecture automatique» par Mr_Antivius . Il s'agit d'une autre manière de lire la vidéo dans React. Ça marche pour moi. Rappelez-vous que le fichier sample.mp4 se trouve dans le même répertoire que le fichier JS. 

3
wangz

Je pense que quelque chose comme ça va marcher:

#background-video{

height: 100%;
width: 100%;
float: left;
top: 0;
padding: none;
position: fixed; /* optional depending on what you want to do in your app */


}
<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>

Vous pouvez rencontrer des problèmes de ratios en fonction de la vidéo que vous utilisez ou de la taille de l’écran des clients.

Vous devrez peut-être vérifier this post.

Pensez également à la taille des écrans actuels. Qu'allez-vous faire si quelqu'un a un écran large ridiculement grand ou quelque chose du genre? La vidéo ne pourra pas s'adapter à l'écran sauf si vous avez une vidéo ayant la même résolution. 

Je ne suggère pas qu'une vidéo est une mauvaise idée. Je veux simplement que vous soyez au courant des problèmes!

Bonne chance!

3
Trevor Clarke