Javascript 使用 React 添加背景视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36230522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a background video with React?
提问by c0derkr
I'm trying to build a simple landing page that contains a fullscreen background image, that will play as soon as the content loads.
我正在尝试构建一个包含全屏背景图像的简单登录页面，该页面将在内容加载后立即播放。
Is there a way to do this using React or CSS inside of React?
有没有办法在 React 中使用 React 或 CSS 来做到这一点？
I've tried using the npm module react-drive-in, but I can't for the life of me figure out how to load my React components over the video. The video keeps loading over my other components.
我已经尝试使用 npm 模块 react-drive-in，但我终生无法弄清楚如何通过视频加载我的 React 组件。视频不断加载到我的其他组件上。
回答by Mr_Antivius
Actually, I was able to get Trevor's code working just fine in my project. I did have to add a closing tag to the source element, like so.
实际上，我能够让 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>
Also, note that 'autoplay' should be changed to 'autoPlay' or React will throw a warning at you and not auto play the video. Outside of those two changes, copying and pasting the code should work just fine.
另请注意，“自动播放”应更改为“自动播放”，否则 React 会向您发出警告而不是自动播放视频。除了这两个更改之外，复制和粘贴代码应该可以正常工作。
ES6/Babel example:
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;
回答by wangz
import sample from './sample.mp4';
<video className='videoTag' autoPlay loop muted>
<source src={sample} type='video/mp4' />
</video>
Thank the note that 'autoplay' should be changed to 'autoPlay' from Mr_Antivius. This is an alternative way to play the video in React. It works for me. Remember that the sample.mp4 file is in the same directory of the JS file.
感谢“自动播放”应从 Mr_Antivius 更改为“自动播放”的说明。这是在 React 中播放视频的另一种方式。这个对我有用。请记住，sample.mp4 文件与 JS 文件在同一目录中。
回答by Trevor Clarke
I think something like this will work:
我认为这样的事情会起作用：
#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>You may run into problems with ratios depending on the video you use or the size of the clients screen.
根据您使用的视频或客户端屏幕的大小，您可能会遇到比例问题。
So you may need to check out thispost.
所以你可能需要看看这篇文章。
Also consider the size of screens today. What are you going to do if someone has a ridiculously large widescreen or something like that? The video will not be able to fit the screen unless you have video that has the same resolution.
还要考虑当今屏幕的大小。如果有人有一个大得离谱的宽屏或类似的东西，你会怎么做？除非您的视频具有相同的分辨率，否则视频将无法适合屏幕。
I'm not suggesting a video is a bad idea. I simply want you to be aware of the problems!
我并不是说视频是个坏主意。我只是想让你意识到这些问题！
Good luck!
祝你好运！
回答by MVS KIRAN
The below code also sets a poster. That is shown while the video loads or in browsers that can't play the 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>
But,its a good practice to show that background video only on larger devices. Because on mobile phones background video may take up too many system resources and effects the performance.So,add a media query and set display:block for mobile devices.
但是，仅在较大的设备上显示背景视频是一种很好的做法。因为在手机上后台视频可能会占用过多的系统资源，影响性能。所以，为移动设备添加一个媒体查询并设置display:block。
