使用React添加背景视频?

时间:2016-03-26 01:16:08

标签: javascript css reactjs

我正在尝试构建一个包含全屏背景图片的简单着陆页,该图片会在内容加载后立即播放。

有没有办法在React中使用React或CSS?

我已经尝试过使用npm模块react-drive-in,但我终生无法弄清楚如何在视频上加载我的React组件。视频不断加载到我的其他组件上。

4 个答案:

答案 0 :(得分:9)

实际上,我能够让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;

答案 1 :(得分:3)

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

&#13;
&#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;
&#13;
&#13;

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

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

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

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

祝你好运!

答案 2 :(得分: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文件的同一目录中。

答案 3 :(得分:0)

以下代码也设置了张贴者。在视频加载时或在无法播放视频的浏览器中显示。

  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。