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

我觉得这样的事情会奏效：

＆＃13;

#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 */


}

＆＃13;

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

＆＃13;

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

因此，您可能需要查看this帖子。

还要考虑今天屏幕的大小。如果有人有一个可笑的大屏幕或类似的东西，你打算做什么？除非视频具有相同的分辨率，否则视频将无法适应屏幕。

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

祝你好运！

Answer 3

import sample from './sample.mp4';

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

感谢注意＆＃39;自动播放＆＃39;应更改为“自动播放”＃39;来自Mr_Antivius。这是在React中播放视频的另一种方法。这个对我有用。请记住，sample.mp4文件位于JS文件的同一目录中。

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。

使用React添加背景视频？

4 个答案: