import sample from './sample.mp4';

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

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

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

另请注意，“自动播放”应更改为“自动播放”，否则 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;

我认为这样的事情会起作用：

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

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

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

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

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

祝你好运！

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

  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。