Добавление фонового видео с помощью React?

Я пытаюсь создать простую целевую страницу, содержащую полноэкранное фоновое изображение, которое будет воспроизводиться сразу после загрузки содержимого.

Есть ли способ сделать это, используя React или CSS внутри React?

Я пробовал использовать модуль взаимодействия npm, но я не могу на всю жизнь понять, как загрузить мои компоненты React над видео. Видео продолжает загружаться по моим другим компонентам.

Ответы

Ответ 1

На самом деле, я смог получить код Trevor, который отлично работает в моем проекте. Мне нужно было добавить закрывающий тег к исходному элементу, например.

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

Также обратите внимание, что "автовоспроизведение" должно быть изменено на "autoPlay", или React выдаст вам предупреждение, а не автоматически воспроизведет видео. Вне этих двух изменений копирование и вставка кода должны работать нормально.

Пример 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;

Ответ 2

import sample from './sample.mp4';

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

Спасибо, что "автовоспроизведение" должно быть изменено на "autoPlay" из Mr_Antivius. Это альтернативный способ воспроизведения видео в React. Меня устраивает. Помните, что файл sample.mp4 находится в том же каталоге JS файла.

Ответ 3

Я думаю, что что-то вроде этого будет работать:

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

Ответ 4

Чтобы добавить ответ Mr_Antivius, вам теперь нужно "отключить", включенное в тег видео, наряду с автозапуском. Теперь это изменилось с Chrome V66. Видео не будет воспроизводиться автоматически без него.