使用React添加背景视频？

Question

我正在尝试构建一个包含全屏背景图像的简单登录页面,该内容将在内容加载后立即播放.

有没有办法在React中使用React或CSS来做到这一点？

我已经尝试过使用npm模块react-drive-in,但我不能为我的生活找出如何在视频上加载我的React组件.视频不断加载我的其他组件.

Answer 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'应更改为'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;

Answer 2

import sample from './sample.mp4';

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

感谢您将“自动播放”从Mr_Antivius更改为“自动播放”的说明。这是在React中播放视频的另一种方法。这个对我有用。请记住，sample.mp4文件与JS文件位于同一目录中。

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

根据您使用的视频或客户端屏幕的大小，您可能会遇到比例问题。

所以你可能需要看看这篇文章。

还要考虑当今屏幕的大小。如果有人有一个大得离谱的宽屏或类似的东西，你会怎么做？除非您的视频具有相同的分辨率，否则视频将无法适合屏幕。

我并不是说视频是个坏主意。我只是想让你意识到这些问题！

祝你好运！

Answer 4

下面的代码还设置了一张海报。这是在视频加载时或在无法播放视频的浏览器中显示的。

  import clip from './clip.mp4'; 
  import Poster from './Poster.png';  

    <video autoPlay loop muted poster={Poster}>
            <source src={clip} type='video/mp4' />
            <source src={clip} type="video/ogg" /> 
    </video>

但是，仅在较大的设备上显示背景视频是一个很好的做法。因为在手机上背景视频可能会占用过多的系统资源并影响性能。因此，为移动设备添加媒体查询并设置display:block。