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

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

Есть ли способ сделать это с помощью React или CSS внутри React?

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

источник

2016-03-26 c0derkr

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

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

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

Поэтому вам может потребоваться выписка this.

Также рассмотрите размер экранов сегодня. Что вы собираетесь делать, если у кого-то есть смехотворно большой широкоформатный экран или что-то в этом роде? Видео не сможет соответствовать экрану, если у вас нет видео с одинаковым разрешением.

Я не предлагаю видео - плохая идея. Я просто хочу, чтобы вы знали о проблемах!

Удачи вам!

источник

2016-03-26 01:33:59

Большое спасибо за ответ. Я боюсь, что это не рендеринг в моем компоненте React, просто потому, что похоже, что он не знает, что такое тег

LOL жаль, что я не видел, что вы использовали реакцию –

Я не уверен, как использовать реакцию ... Извините –

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

<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» или Реагировать выбросит предупреждение на вас, а не автоматическое воспроизведение видео. Вне этих двух изменений копирование и вставка кода должны работать нормально.

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;

источник

2016-03-26 04:57:09

Это должно быть отмечено как лучший ответ –

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-файла.

источник

2017-05-10 07:18:26 wangz

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

ответ

Смежные вопросы